CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11"><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://make.wordpress.org:80/ui/","20130302092326","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1362216206"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <link href="https://plus.google.com/107188080561309681193" rel="publisher"/> <meta name="google-site-verification" content="7VWES_-rcHBcmaQis9mSYamPfNwE03f4vyTj4pfuAw0"/> <title>WordPress › Make WordPress UI « A Better User Experience Make WordPress UI</title> <link rel="stylesheet" href="https://web.archive.org/web/20130302092326cs_/http://s.wordpress.org/style/wp4.css?27"/> <link media="only screen and (max-device-width: 480px)" href="https://web.archive.org/web/20130302092326cs_/http://s.wordpress.org/style/iphone.css" type="text/css" rel="stylesheet"/> <link rel="shortcut icon" href="https://web.archive.org/web/20130302092326im_/http://s.wordpress.org/favicon.ico?3" type="image/x-icon"/> <link rel="alternate" type="application/rss+xml" title="Make WordPress UI" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/feed/"/> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://web.archive.org/web/20130302092326/https://ssl." : "https://web.archive.org/web/20130302092326/http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-52447-1"); pageTracker._initData(); pageTracker._trackPageview(); function recordOutboundLink(link, category, action) { pageTracker._trackEvent(category, action); setTimeout('document.location = "' + link.href + '"', 100); } </script>  <link rel="pingback" href="http://make.wordpress.org/ui/xmlrpc.php"/><link rel="stylesheet" href="https://web.archive.org/web/20130302092326cs_/http://make.wordpress.org/ui/wp-content/themes/make-p2/style.css?v=2" type="text/css" media="screen"/> <script type="text/javascript"> // <![CDATA[ // P2 Configuration var ajaxUrl = "https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-admin/admin-ajax.php?p2ajax=true"; var updateRate = "30000"; // 30 seconds var nonce = "39e1fa27f5"; var login_url = "https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F"; var templateDir = "https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-content/themes/p2"; var isFirstFrontPage = 1; var isFrontPage = 1; var isSingle = 0; var isPage = 0; var isUserLoggedIn = 0; var prologueTagsuggest = 1; var prologuePostsUpdates = 1; var prologueCommentsUpdates = 1; var getPostsUpdate = 0; var getCommentsUpdate = 0; var inlineEditPosts = 1; var inlineEditComments = 1; var wpUrl = "https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui"; var rssUrl = ""; var pageLoadTime = "2013-03-02 09:23:24"; var original_title = document.title; var commentsOnPost = new Array; var postsOnPage = new Array; var postsOnPageQS = ''; var currPost = -1; var currComment = -1; var commentLoop = false; var lcwidget = false; var hidecomments = false; var commentsLists = ''; var newUnseenUpdates = 0; var mentionData = null; // ]]> </script> <link rel="alternate" type="application/rss+xml" title="Make WordPress UI » Feed" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/feed/"/> <link rel="alternate" type="application/rss+xml" title="Make WordPress UI » Comments Feed" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/comments/feed/"/> <script type="text/javascript"> //<![CDATA[ var wpLocale = {"month":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthabbrev":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"weekday":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"weekdayabbrev":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]}; //]]> </script> <link rel="stylesheet" id="admin-bar-css" href="https://web.archive.org/web/20130302092326cs_/http://make.wordpress.org/ui/wp-includes/css/admin-bar.min.css?ver=3.6-alpha-23495" type="text/css" media="all"/> <link rel="stylesheet" id="jetpack-widgets-css" href="https://web.archive.org/web/20130302092326cs_/http://make.wordpress.org/ui/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003" type="text/css" media="all"/> <link rel="stylesheet" id="p2-css" href="https://web.archive.org/web/20130302092326cs_/http://make.wordpress.org/ui/wp-content/themes/make-p2/style.css?ver=3.6-alpha-23495" type="text/css" media="all"/> <link rel="stylesheet" id="p2-print-style-css" href="https://web.archive.org/web/20130302092326cs_/http://make.wordpress.org/ui/wp-content/themes/p2/style-print.css?ver=20120807" type="text/css" media="print"/> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-includes/js/jquery/jquery.js?ver=1.9.1"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-includes/js/jquery/jquery-migrate.js?ver=1.1.0"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-includes/js/jquery/jquery.color.min.js?ver=2.1.0"></script> <script type="text/javascript"> /* <![CDATA[ */ var userSettings = {"url":"\/","uid":"0","time":"1362216203"}; /* ]]> */ </script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-includes/js/utils.min.js?ver=3.6-alpha-23495"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-includes/js/comment-reply.min.js?ver=3.6-alpha-23495"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-content/themes/p2/js/jquery.scrollTo-min.js?ver=20120402"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-content/themes/p2/js/wp-locale.js?ver=20110415"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-content/themes/p2/js/spin.js?ver=20120704"></script> <script type="text/javascript"> /* <![CDATA[ */ var p2txt = {"tags":"<br \/>Tags:","tagit":"Tag it","citation":"Citation","title":"Post Title","goto_homepage":"Go to homepage","n_new_updates":"%d new update(s)","n_new_comments":"%d new comment(s)","jump_to_top":"Jump to top","not_posted_error":"An error has occurred, your post was not posted","update_posted":"Your update has been posted","loading":"Loading...","cancel":"Cancel","save":"Save","hide_threads":"Hide threads","show_threads":"Show threads","unsaved_changes":"Your comments or posts will be lost if you continue.","date_time_format":"%1$s <em>on<\/em> %2$s","date_format":"F j, Y","time_format":"g:i a","autocomplete_prompt":"After typing @, type a name or username to find a member of this site","no_matches":"No matches.","comment_cancel_ays":"Are you sure you would like to clear this comment? Its contents will be deleted.","oops_not_logged_in":"Oops! Looks like you are not logged in.","please_log_in":"Please log in again","whoops_maybe_offline":"Whoops! Looks like you are not connected to the server. P2 could not connect with WordPress."}; try{convertEntities(p2txt);}catch(e){};; /* ]]> */ </script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-content/themes/p2/js/p2.js?ver=20121128"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://make.wordpress.org/ui/xmlrpc.php?rsd"/> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://make.wordpress.org/ui/wp-includes/wlwmanifest.xml"/> <meta name="generator" content="WordPress 3.6-alpha-23495"/> <link rel="shortlink" href="https://web.archive.org/web/20130302092326/http://wp.me/29g3i"/> <style type="text/css"> .is-js .hide-if-js { display: none; } .p2-task-list ul { margin-left: 0 !important; } .p2-task-list ul ul { margin-left: 20px !important; } .p2-task-list li { list-style: none; } </style> <script type="text/javascript"> jQuery( function( $ ) { $( 'body' ) .addClass( 'is-js' ) .delegate( '.p2-task-list :checkbox', 'click', function() { var $this = $( this ), $li = $this.parents( 'li:first' ), $form = $this.parents( 'form:first' ), data = $li.find( ':input' ).serialize(), colorEl = $li, origColor = $li.css( 'background-color' ), color; while ( colorEl.get(0).tagName && colorEl.css( 'background-color' ).match( /^\s*(rgba\s*$\s*0+\s*,\s*0+\s*,\s*0+\s*,\s*0+\s*$|transparent)\s*$/ ) ) { colorEl = colorEl.parent(); } color = colorEl.get(0).tagName ? colorEl.css( 'background-color' ) : '#ffffff'; data += '&ajax=1&' + $form.find( '.submit :input' ).serialize(); $.post( $form.attr( 'action' ), data, function( response ) { if ( '1' === response ) $li.css( 'background-color', '#F6F3D1' ).animate( { backgroundColor: color }, 'slow', function() { $li.css( 'background-color', origColor ); } ); } ); } ); } ); </script> <style type="text/css" media="print">#wpadminbar { display:none; }</style> <style type="text/css" media="screen"> html { margin-top: 28px !important; } * html body { margin-top: 28px !important; } </style> <style id="p2-header-style" type="text/css"> </style> <meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="3.1.4"/> <script>document.cookie='devicePixelRatio='+((window.devicePixelRatio === undefined) ? 1 : window.devicePixelRatio)+'; path=/';</script> </head> <body id="wordpress-org" class="home blog admin-bar no-customize-support"> <div id="header"> <div class="wrapper"> <h1><a href="//web.archive.org/web/20130302092326/http://wordpress.org/">WordPress.org</a></h1> <form action="https://web.archive.org/web/20130302092326/http://wordpress.org/search/do-search.php" method="get" id="head-search"> <input class="text" name="search" type="text" value="Search WordPress.org" maxlength="150" onfocus="this.value=(this.value=='Search WordPress.org') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search WordPress.org' : this.value;"/> <input type="submit" class="button" value="Go"/> </form> <ul> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/showcase/" title="See some of the sites built on WordPress.">Showcase</a></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/extend/themes/" title="Find just the right look for your website.">Themes</a></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/extend/plugins/" title="Plugins can extend WordPress to do almost anything you can imagine.">Plugins</a></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/extend/mobile/" title="Take your website on the go!">Mobile</a></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/support/" title="Forums, documentation, help.">Support</a><ul class="nav-submenu"><li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/support/" title="Support and discussion forums.">Forums</a></li><li><a href="https://web.archive.org/web/20130302092326/http://codex.wordpress.org/Main_Page" title="Documentation, tutorials, best practices.">Docs</a></li></ul></li> <li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/" title="Contribute your knowledge." class="current">Get Involved</a><ul class="nav-submenu"><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/core/" title="Write the code.">Core</a></li><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/" title="Improve the interface." class="subcurrent">UI</a></li><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/accessibility/" title="Create a better experience.">Accessibility</a></li><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/plugins/" title="Extend the system.">Plugins</a></li><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/themes/" title="Beautify the web.">Themes</a></li><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/support/" title="Help the users.">Support</a></li><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/polyglots/" title="Translate for the world.">Polyglots</a></li><li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/mobile/" title="On the go.">Mobile</a></li></ul></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/about/" title="About the WordPress Organization, and where we're going.">About</a></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/news/" title="Come here for the latest scoop.">Blog</a></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/hosting/" title="Find a home for your blog.">Hosting</a></li> <li id="download"><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/download/" title="Get it. Got it? Good.">Download</a></li> </ul> </div> </div> <div id="headline"> <div class="wrapper"> <h2><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/">Make WordPress UI</a></h2> </div> </div> <div id="header2">  </div> <div id="wrapper"> <div id="sidebar"> <ul> <li id="text-4" class="widget widget_text"><h2 class="widgettitle">Welcome to the WordPress UI Group!</h2> <div class="textwidget">This is the official blog for the WordPress open source project's UI design and development group. Follow along and/or participate as we post about what we're currently working on, meetings, and big picture items. To get commenting, log in using your WordPress.org username and password. Glad to have you!</div> </li> <li id="blog_subscription-2" class="widget jetpack_subscription_widget"><h2 class="widgettitle"><label for="subscribe-field">Subscribe to Blog via Email</label></h2> <a id="subscribe-blog"></a> <form action="" method="post" accept-charset="utf-8" id="subscribe-blog"> <p>Enter your email address to subscribe to this blog and receive notifications of new posts by email.</p> <p><input type="text" name="email" style="width: 95%; padding: 1px 2px" value="Email Address" id="subscribe-field" onclick="if ( this.value == 'Email Address' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'Email Address'; }"/></p> <p> <input type="hidden" name="action" value="subscribe"/> <input type="hidden" name="source" value="http://make.wordpress.org/ui/"/> <input type="hidden" name="sub-type" value="widget"/> <input type="hidden" name="redirect_fragment" value="blog_subscription-2"/> <input type="submit" value="Subscribe" name="jetpack_subscriptions_widget"/> </p> </form> </li> <li id="text-3" class="widget widget_text"><h2 class="widgettitle">Weekly UI Chat</h2> <div class="textwidget"><ul><li>Tuesdays @ <a href="https://web.archive.org/web/20130302092326/http://www.timeanddate.com/worldclock/fixedtime.html?hour=19&min=00&sec=0&p1=0">19:00 UTC</a></li> <li>irc.freenode.net </li> <li>#wordpress-ui</li> <li><a href="https://web.archive.org/web/20130302092326/https://irclogs.wordpress.org/chanlog.php?channel=wordpress-ui">IRC Logs</a></li> </ul></div> </li> <li id="text-5" class="widget widget_text"><h2 class="widgettitle">Open Office Hours</h2> <div class="textwidget">Weekdays @ <a href="https://web.archive.org/web/20130302092326/http://www.timeanddate.com/worldclock/fixedtime.html?hour=20&min=00&sec=0&p1=0">20:00 UTC</a></div> </li> <li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2> <ul> <li> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/" title="Icon feedback">Icon feedback</a> </li> <li> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/" title="It seems to be moving in the right…">It seems to be moving in the right…</a> </li> <li> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/" title="Discuss: Icons">Discuss: Icons</a> </li> <li> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/07/heres-round-7-of-our-menus-usability-tests/" title="Here’s round 7 of our menus usability tests…">Here’s round 7 of our menus usability tests…</a> </li> <li> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/05/i-tested-two-more-users-on-our-menus/" title="I tested two more users on our menus…">I tested two more users on our menus…</a> </li> </ul> </li> <li id="nav_menu-3" class="widget widget_nav_menu"><h2 class="widgettitle">Make It Better!</h2> <div class="menu-make-it-better-container"><ul id="menu-make-it-better" class="menu"><li id="menu-item-320" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-320"><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/tag/trac/">UI Issues on Trac</a></li> </ul></div></li> <li id="nav_menu-4" class="widget widget_nav_menu"><h2 class="widgettitle">Resources & Reference</h2> <div class="menu-resources-reference-container"><ul id="menu-resources-reference" class="menu"><li id="menu-item-251" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-251"><a href="https://web.archive.org/web/20130302092326/http://dotorgstyleguide.wordpress.com/">WordPress UI Style Guide</a></li> <li id="menu-item-285" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-285"><a href="https://web.archive.org/web/20130302092326/http://cl.ly/1J1O143d41251G2m1B3z">WordPress Admin PSD (Outdated)</a></li> <li id="menu-item-637" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-637"><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/core/handbook/coding-standards/css/">CSS Coding Standards (Draft)</a></li> <li id="menu-item-638" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-638"><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/core/handbook/">Core Contributor Handbook</a></li> </ul></div></li> <li id="search-3" class="widget widget_search"><form role="search" method="get" id="searchform" action="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/"> <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s"/> <input type="submit" id="searchsubmit" value="Search"/> </div> </form></li> <li id="p2_recent_comments-3" class="widget widget_p2_recent_comments"><h2 class="widgettitle">Recent Comments</h2> <table class="p2-recent-comments" cellspacing="0" cellpadding="0" border="0"> <tr><td title="Matt Mullenweg" class="avatar" style="height: 32px; width: 32px"><a href="https://web.archive.org/web/20130302092326/http://ma.tt/" rel="nofollow"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></a></td><td class="text"><a href="https://web.archive.org/web/20130302092326/http://ma.tt/" rel="nofollow">Matt Mullenweg</a> on <a href="#comment-22672" class="tooltip" title="The meeting went great, we decided to take the ico…">It seems to be moving in the r…</a></td></tr><tr><td title="lessbloat" class="avatar" style="height: 32px; width: 32px"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></td><td class="text">lessbloat on <a href="#comment-22671" class="tooltip" title="We're going for a G+ hangout at 11:00 PST (2:00 ES…">It seems to be moving in the r…</a></td></tr><tr><td title="Empireoflight" class="avatar" style="height: 32px; width: 32px"><a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="nofollow"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></a></td><td class="text"><a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="nofollow">Empireoflight</a> on <a href="#comment-22670" class="tooltip" title="http://cl.ly/image/162s2W3Y2T0X a: I smoothed out …">Icon feedback</a></td></tr><tr><td title="lessbloat" class="avatar" style="height: 32px; width: 32px"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></td><td class="text">lessbloat on <a href="#comment-22669" class="tooltip" title="Overall I think these are looking great. Ben has d…">Icon feedback</a></td></tr><tr><td title="Aaron D. Campbell" class="avatar" style="height: 32px; width: 32px"><a href="https://web.archive.org/web/20130302092326/http://ran.ge/" rel="nofollow"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/f27b79eb04eb414c4c1fc98375fe7404?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></a></td><td class="text"><a href="https://web.archive.org/web/20130302092326/http://ran.ge/" rel="nofollow">Aaron D. Campbell</a> on <a href="#comment-22668" class="tooltip" title="I definitely like B2 & E2. The Key (L) looks a…">Icon feedback</a></td></tr><tr><td title="Ricky Lee" class="avatar" style="height: 32px; width: 32px"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/7807de154b3638fa7bdd6231bec43283?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></td><td class="text">Ricky Lee on <a href="#comment-22667" class="tooltip" title="It is such a drastic departure from current textur…">Icon feedback</a></td></tr><tr><td title="Matt Thomas" class="avatar" style="height: 32px; width: 32px"><a href="https://web.archive.org/web/20130302092326/http://mattnt.com/" rel="nofollow"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/86debe7ed7ece0f968097a768dcbd5cb?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></a></td><td class="text"><a href="https://web.archive.org/web/20130302092326/http://mattnt.com/" rel="nofollow">Matt Thomas</a> on <a href="#comment-22666" class="tooltip" title="I think the individual forms are looking good, but…">Icon feedback</a></td></tr><tr><td title="Helen Hou-Sandi" class="avatar" style="height: 32px; width: 32px"><a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="nofollow"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></a></td><td class="text"><a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="nofollow">Helen Hou-Sandi</a> on <a href="#comment-22665" class="tooltip" title="Board is what's currently used for settings. Gear …">Icon feedback</a></td></tr><tr><td title="acsearles" class="avatar" style="height: 32px; width: 32px"><a href="https://web.archive.org/web/20130302092326/http://www.andysearles.com/" rel="nofollow"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/e2b3d4b90ac2ae4e7d5ca13e8ea04f19?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></a></td><td class="text"><a href="https://web.archive.org/web/20130302092326/http://www.andysearles.com/" rel="nofollow">acsearles</a> on <a href="#comment-22664" class="tooltip" title="I agree with Isaac. Key (L) should point up.">Icon feedback</a></td></tr><tr><td title="Mel Choyce" class="avatar" style="height: 32px; width: 32px"><a href="https://web.archive.org/web/20130302092326/http://choycedesign.com/" rel="nofollow"><img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/2dc245d4cf9e5579dfb0e13e7dcb75db?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/></a></td><td class="text"><a href="https://web.archive.org/web/20130302092326/http://choycedesign.com/" rel="nofollow">Mel Choyce</a> on <a href="#comment-22663" class="tooltip" title="I can also do Wed or Thurs.">It seems to be moving in the r…</a></td></tr> </table></li> <li id="meta-3" class="widget widget_meta"><h2 class="widgettitle">Meta</h2> <ul> <li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php">Log in</a></li> <li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://web.archive.org/web/20130302092326/http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul> </li> </ul> <div class="clear"></div> </div>  <div class="sleeve_main"> <div id="main"> <h2> Recent Updates <span class="controls"> <a href="#" id="togglecomments"> Toggle Comment Threads</a> | <a href="#directions" id="directions-keyboard">Keyboard Shortcuts</a> </span> </h2> <ul id="postlist"> <li id="prologue-837" class="post-837 post type-post status-publish format-standard hentry category-uncategorized"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )">lessbloat</a> <span class="meta"> <abbr title="2013-02-26T18:52:53Z">6:52 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/" class="thepermalink" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to leave a Comment</a> </span> <span class="tags">   </span> </span> </h4> <div id="content-837" class="postcontent"> <h2><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/">Icon feedback </a></h2><p>I’d like to kick off another round of icon feedback, this time with several constraints. If you have any concerns with the flat icons <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/ticket/23333">currently in trunk</a>, now is your time to speak up. </p> <p><strong>A few rules for this exercise:</strong></p> <p>DO’s:</p> <ul> <li>Please be constructive. Each icon has a letter assigned to it, if you’ve got feedback for 2 out of the 13 icons, tell us what you don’t like about each one individually (or even better, mock something up for each one).</li> <li>Please leave admin UI out of all mockups for this exercise (just icons on a white background for now).</li> </ul> <p>DON’Ts:</p> <ul> <li>Don’t make broad declarations (i.e. “I don’t like them”, or “I like the old icons better”).</li> <li>Don’t comment on the color/contrast (we’ll save that for another discussion).</li> </ul> <p><strong>Thoughts:</strong></p> <p><img src="https://web.archive.org/web/20130302092326im_/http://f.cl.ly/items/0X3o0H002I0f3c1G1N1e/flat-icons.png" border="0"/></p> <p><a href="https://web.archive.org/web/20130302092326/http://cl.ly/1d2u0E3S1m0O">Source File</a></p> </div> <div class="discussion" style="display: none"> <p> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="external nofollow" class="url">Empireoflight</a>, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> lessbloat, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/f27b79eb04eb414c4c1fc98375fe7404?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://ran.ge/" rel="external nofollow" class="url">Aaron D. Campbell</a>, and 11 others are discussing. <a href="#" class="show-comments">Toggle Comments</a> </p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-837" class="commentlist inlinecomments"> <li id="comment-22645" class="comment byuser comment-author-georgestephanis even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/0ee0e164bf963095810318bbacf5c918?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.stephanis.info/" rel="external nofollow" class="url">George Stephanis</a> <span class="meta"> <abbr title="2013-02-26T19:07:10Z">7:07 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22645" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22645" class="commentcontent"><p>I’m going to assume these letters aren’t the letters that the characters will necessarily be mapped to in an icon font (if that happens).</p> <p>L (key): I don’t like how narrow the point is where the disc connects to the key blade.</p> <p>Apart from that, I like it all.</p> </div> <ul class="children"> <li id="comment-22646" class="comment byuser comment-author-lessbloat odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-26T19:09:05Z">7:09 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22646" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22646" class="commentcontent"><p>Right, just random lettering, they have nothing to do with the mappings. <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"/> </p> </div> </li> </ul> </li> <li id="comment-22647" class="comment byuser comment-author-norcross even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/26ab8f9b2c86b10e7968b882403b3bf8?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://andrewnorcross.com/" rel="external nofollow" class="url">Norcross</a> <span class="meta"> <abbr title="2013-02-26T19:10:56Z">7:10 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22647" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22647" class="commentcontent"><p>from a strictly visual perspective, I’d prefer to see the them be aligned either by the top or the bottom. A and E (the paintbrush and camera, respectively) seems to be shorter than the rest.</p> </div> <ul class="children"> <li id="comment-22659" class="comment byuser comment-author-tomauger odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/9e2ff0c5b6051afc8e186aacd9026e98?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.tomauger.com/" rel="external nofollow" class="url">Tom Auger</a> <span class="meta"> <abbr title="2013-02-26T20:35:16Z">8:35 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22659" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22659" class="commentcontent"><p>That’s a good observation. In fact, it would be ideal if they were all the exact same pixel height. To that point, I, E and possibly A don’t appear to match.</p> </div> </li> </ul> </li> <li id="comment-22648" class="comment byuser comment-author-isaackeyet even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/848f029cb21bb7aef88d2088e036794b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://isaackeyet.com/blog" rel="external nofollow" class="url">Isaac Keyet</a> <span class="meta"> <abbr title="2013-02-26T19:21:01Z">7:21 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22648" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22648" class="commentcontent"><p>Some thoughts…</p> <p>B: Compared to E, G, H, and I (which are all rounded) the comment bubble seems way too rounded and like it’s the odd one out. The big > also makes it seem less vertically centered (optically).<br/> H: compared to G and L, H seems “too long” and the optical center is off to the upper right which throws off the balance.<br/> E: most likely modeled after a classic camera (e.g. a Leica) and not a modern DSLR it makes sense in theory, but compared to other icons it’s less than round corners seems off. Especially when compared to C and F – these icons have very straight lines for a reason.<br/> I: my biggest pet-peeve is with this icon. It’s overly complex compared to most other icons in it’s detail, which becomes especially noticable in the small size. An icon with only two levers (one up, one down) would convey the exact same thing and reduce the overall business of the admin and settings sidebar section. The previous icon also only had two levers if I remember correctly.<br/> M: the cogs in the gear seem too tall, mainly because there’s no second gear to relate this cog to. Presumably the second gear would have smaller teeth to grip into this one, but as it is now all you have to go on is this icon on it’s own so you have to assume that subsequent gears have the same teeth size, which makes this gear impossible to work. (I know I’m being super picky now, but if you’re going to do it, better do it right! <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley"/> ). A gear with bigger gaps in between the teeth/shorter teeth would make more sense.<br/> A, C, D, F, G (and to some extent I): these icons have gaps in between different parts of the icon, but they’re not all the same size (at least it doesn’t look that way) for consistency the gaps should all have the same optical depth.</p> <p>I’d be happy to mock up any of this. Or all of it. Source files? <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> <ul class="children"> <li id="comment-22653" class="comment byuser comment-author-isaackeyet odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/848f029cb21bb7aef88d2088e036794b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://isaackeyet.com/blog" rel="external nofollow" class="url">Isaac Keyet</a> <span class="meta"> <abbr title="2013-02-26T19:28:06Z">7:28 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22653" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22653" class="commentcontent"><p>Definitely like B2 better than B.</p> <p>I’d like E2 better if it somehow depicted video too.. wrapping up the “multimedia” feel. But E2 > E.</p> </div> </li> <li id="comment-22655" class="comment byuser comment-author-lessbloat even depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-26T19:31:55Z">7:31 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22655" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22655" class="commentcontent"><p><a href="https://web.archive.org/web/20130302092326/http://cl.ly/1d2u0E3S1m0O" rel="nofollow">Source file</a></p> </div> <ul class="children"> <li id="comment-22660" class="comment byuser comment-author-tomauger odd alt depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/9e2ff0c5b6051afc8e186aacd9026e98?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.tomauger.com/" rel="external nofollow" class="url">Tom Auger</a> <span class="meta"> <abbr title="2013-02-26T20:35:54Z">8:35 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22660" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22660" class="commentcontent"><p>B2 gets my vote as well for the same reasons</p> </div> </li> </ul> </li> </ul> </li> <li id="comment-22649" class="comment byuser comment-author-saracannon even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/32b34f5d4fdde3f24996bc8c5ec38f10?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/saracannon/" rel="external nofollow" class="url">sara cannon</a> <span class="meta"> <abbr title="2013-02-26T19:21:56Z">7:21 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22649" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22649" class="commentcontent"><p>is (M) the gear for settings or (I) the board? Personally I like the gear.</p> </div> <ul class="children"> <li id="comment-22665" class="comment byuser comment-author-helen odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="external nofollow" class="url">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-26T22:50:14Z">10:50 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22665" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22665" class="commentcontent"><p>Board is what’s currently used for settings. Gear gets used for added menu items that don’t specify an icon.</p> </div> </li> </ul> </li> <li id="comment-22650" class="comment byuser comment-author-ipstenu even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/abfd4ff9c24957f1a9f0435e23de1f73?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://halfelf.org/" rel="external nofollow" class="url">Ipstenu (Mika Epstein)</a> <span class="meta"> <abbr title="2013-02-26T19:24:31Z">7:24 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22650" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22650" class="commentcontent"><p>L – which is for ‘Sites’ in Network Admin has always felt a little indistinct. What does a ‘key’ have to do with your sites? </p> <p>G – I greatly prefer this to the straight horizontal icon before. +1 Having it at an angle feels better.</p> <p>E – I prefer E2 since it indicates that there’s more than just ONE type of media to be uploaded.</p> <p>B – I’m torn here. I prefer the B-original aesthetically, but B2 fits the schema more.</p> <p>M – I agree with Issac – The cog teeth are too tall. (Where is this being used? The icon for settings is the slider). Depending on how it resizes, maybe a dial with an arrow instead?</p> <p>I – Two sliders in the icon (like we use today) would be better I feel.</p> </div> <ul class="children"> <li id="comment-22658" class="comment byuser comment-author-isaackeyet odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/848f029cb21bb7aef88d2088e036794b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://isaackeyet.com/blog" rel="external nofollow" class="url">Isaac Keyet</a> <span class="meta"> <abbr title="2013-02-26T19:37:26Z">7:37 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22658" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22658" class="commentcontent"><p>+1 on G°</p> </div> </li> </ul> </li> <li id="comment-22651" class="comment byuser comment-author-chipbennett even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1299e8d336a2d5faa4fc440d07ea44f8?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.chipbennett.net/" rel="external nofollow" class="url">Chip Bennett</a> <span class="meta"> <abbr title="2013-02-26T19:24:47Z">7:24 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22651" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22651" class="commentcontent"><p>A, G, and H (A and G in particular) are very, very similar; especially when viewed at a glance, and without accompanying text labels – and especially considering their on-screen/in-menu proximity.</p> <p>Is a paintbrush the best/most accurate icon for “Appearance”? Perhaps a painter’s palette, or a paint can/brush? Or maybe a monitor/screen with content, or a “layout” option (with boxes for header/content/footer/sidebar)?</p> </div> <ul class="children"> <li id="comment-22652" class="comment byuser comment-author-ipstenu odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/abfd4ff9c24957f1a9f0435e23de1f73?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://halfelf.org/" rel="external nofollow" class="url">Ipstenu (Mika Epstein)</a> <span class="meta"> <abbr title="2013-02-26T19:27:33Z">7:27 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22652" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22652" class="commentcontent"><p>A painter palette would be more distinctive. (I think G and H look more ‘alike’ when on their angle… Maybe flip G so the prongs point straight down?</p> </div> </li> <li id="comment-22656" class="comment byuser comment-author-isaackeyet even depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/848f029cb21bb7aef88d2088e036794b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://isaackeyet.com/blog" rel="external nofollow" class="url">Isaac Keyet</a> <span class="meta"> <abbr title="2013-02-26T19:33:08Z">7:33 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22656" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22656" class="commentcontent"><p>Nice thoughts…</p> <p>On this topic, I just realized that while A + G + H + J + L are all similarly tall, skinny and on a 45° angle, they seem to be on their particular angle randomly (A + G + H pointing up+right, J + L pointing down+left).</p> <p>If A + G + H is about changing up your site (not producing content), I think the Key (L) should also be pointing up+right.</p> </div> <ul class="children"> <li id="comment-22664" class="comment byuser comment-author-acsearles odd alt depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/e2b3d4b90ac2ae4e7d5ca13e8ea04f19?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.andysearles.com/" rel="external nofollow" class="url">acsearles</a> <span class="meta"> <abbr title="2013-02-26T21:21:14Z">9:21 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22664" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22664" class="commentcontent"><p>I agree with Isaac. Key (L) should point up.</p> </div> </li> </ul> </li> </ul> </li> <li id="comment-22654" class="comment byuser comment-author-helen even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="external nofollow" class="url">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-26T19:30:55Z">7:30 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22654" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22654" class="commentcontent"><p>A and H having such differently shaped handles is what strikes me first, especially alongside G with its squarely terminated cable. I think the wrench (H) is perfect, so if sticking with a paintbrush, then I suppose I’d like to see what it’d look like with a handle similar to the wrench.</p> <p>However, I’m still torn about whether or not a paintbrush is really the right icon. I like it in many ways, but some of the items under the Appearance menu (widgets and menus in particular) don’t seem to fit with what a paintbrush conveys.</p> </div> <ul class="children"> <li id="comment-22657" class="comment byuser comment-author-isaackeyet odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/848f029cb21bb7aef88d2088e036794b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://isaackeyet.com/blog" rel="external nofollow" class="url">Isaac Keyet</a> <span class="meta"> <abbr title="2013-02-26T19:36:24Z">7:36 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22657" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22657" class="commentcontent"><p>An Eye icon would sum it all up pretty well. (e.g. <a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/1X1139311d1Y" rel="nofollow">http://cl.ly/image/1X1139311d1Y</a> ) While the icon now typically means “preview” in mobile OSs like iOS, it’s still fairly universal.</p> </div> </li> </ul> </li> <li id="comment-22661" class="comment byuser comment-author-tomauger even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/9e2ff0c5b6051afc8e186aacd9026e98?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.tomauger.com/" rel="external nofollow" class="url">Tom Auger</a> <span class="meta"> <abbr title="2013-02-26T20:38:20Z">8:38 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22661" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22661" class="commentcontent"><p>I like the simplicity of it all. I daresay F might be just a little too simple – could you add the typical “page curl” without increasing the visual clutter too much?</p> </div> </li> <li id="comment-22662" class="comment byuser comment-author-acsearles odd alt thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/e2b3d4b90ac2ae4e7d5ca13e8ea04f19?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.andysearles.com/" rel="external nofollow" class="url">acsearles</a> <span class="meta"> <abbr title="2013-02-26T20:52:55Z">8:52 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22662" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22662" class="commentcontent"><p>L (the Key) kinda bothers me. I think the joining of the teeth and the circle seems a little to fragile to me. At first I thought the key would be better horizontally but I think that the diagonal works with best with A D F G H J. Here’s an example that I like from the noun project. <a href="https://web.archive.org/web/20130302092326/http://thenounproject.com/noun/key/#icon-No655" rel="nofollow">http://thenounproject.com/noun/key/#icon-No655</a></p> <p>B2 (comment bubble) is much better. Side note, I’ve never liked how a comment bubble tends to look like a thumbs down at small sizes but I’m not really sure how to get over that yet. Maybe something like this? <a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/3k463V0t1s0v" rel="nofollow">http://cl.ly/image/3k463V0t1s0v</a> This would take advantage of the top-right to bottom-left diagonal we have going and make it look a little less like a thumbs down. I also slimed down the height on the bubble. It was starting to have a little to much mass to it. It sticks out when it’s so big.</p> <p>E2 (media) I like the inclusion of the music note but the terminals on the end look weird to me as circles. Correct me if I’m wrong but most often a music note is more oval and sits kinda on a diagonal, which could be good for consistency. Here’s what I’m thinking. <a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/3z0x082d151V" rel="nofollow">http://cl.ly/image/3z0x082d151V</a></p> <p>M (gear) I agree the notches are to tall. Just slightly down some would help. But I’m kinda with isaac on this one about two gears. I know one gear has become a common icon for settings pages and such but it’s really the gears working together that is the concept not just the gear itself. But these icons are pretty simple so a second gear might get too complicated. But if you do a second one, it should be on the same diagonal as everything else. This one from the Noun project I think does it well if we stick with a single gear. <a href="https://web.archive.org/web/20130302092326/http://thenounproject.com/noun/gear/#icon-No6052" rel="nofollow">http://thenounproject.com/noun/gear/#icon-No6052</a> the difference is the inner-circle is wider and the notches are not rectangles they’re trapezoids. Plus the notches aren’t as tall.</p> <p>I (slider panel) is too complicated compared to everything else. Two would be better. Conceptually, with out text, I’m not sure what the difference between the M and I would be if I clicked on it. So maybe I needs to go back to the drawing board.</p> <p>A (paint brush) I like the eye idea from Isaac. But maybe we could go with something more like this. <a href="https://web.archive.org/web/20130302092326/http://thenounproject.com/noun/eye/#icon-No2307" rel="nofollow">http://thenounproject.com/noun/eye/#icon-No2307</a> Isaac’s revered out eye is a little creepy. But I’ll a little hesitant to get away from the paint brush because it fits really nicely with everything else, where I don’t think an eye would. If we did an eye, I would put some thought into trying to make it conform to the diagonal that we’ve already go set. I don’t love it but I would start here. <a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/0a2O1i2C473f" rel="nofollow">http://cl.ly/image/0a2O1i2C473f</a></p> <p>F (pages) Sorry Tom, I think the curl might be too much. if you ad the curl then you’ll need a line to help distinguish it. I don’t think it needs it. But for the pages I would bring down the page on top to overlap more of the page on bottom. That way it’s a little more stream lined but you keep everything else that’s good about it. I agree with some commenters above that it stands a little to tall. Here’s where I think you should move it to. <a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/2G0X092d1G1G" rel="nofollow">http://cl.ly/image/2G0X092d1G1G</a></p> <p>Well, that’s all my thoughts. Sorry it’s a little long.</p> </div> </li> <li id="comment-22666" class="comment byuser comment-author-iammattthomas even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/86debe7ed7ece0f968097a768dcbd5cb?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://mattnt.com/" rel="external nofollow" class="url">Matt Thomas</a> <span class="meta"> <abbr title="2013-02-27T03:07:39Z">3:07 am <em>on</em> February 27, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22666" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22666" class="commentcontent"><p>I think the individual forms are looking good, but they could benefit from tweaking the size relationships between them. If we extend square or rectangular icons all the way to the edges of their specified size, then non-square icons all look optically too small by comparison. The Chrome Web Store has some really simple but relevant guidelines on how to space differently-sized icons for optimal size consistency between them. <a href="https://web.archive.org/web/20130302092326/https://developers.google.com/chrome/web-store/docs/images#iconsize" rel="nofollow">https://developers.google.com/chrome/web-store/docs/images#iconsize</a></p> </div> </li> <li id="comment-22667" class="comment byuser comment-author-rickylee odd alt thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/7807de154b3638fa7bdd6231bec43283?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> Ricky Lee <span class="meta"> <abbr title="2013-02-27T03:24:05Z">3:24 am <em>on</em> February 27, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22667" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22667" class="commentcontent"><p>It is such a drastic departure from current textured icons. I understand that flat design is in right now but a slight inner shadow would work wonders.</p> <p><a href="https://web.archive.org/web/20130302092326/https://dl.dropbox.com/u/12607958/menu.png" rel="nofollow">https://dl.dropbox.com/u/12607958/menu.png</a></p> </div> </li> <li id="comment-22668" class="comment byuser comment-author-aaroncampbell even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/f27b79eb04eb414c4c1fc98375fe7404?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://ran.ge/" rel="external nofollow" class="url">Aaron D. Campbell</a> <span class="meta"> <abbr title="2013-02-27T04:37:48Z">4:37 am <em>on</em> February 27, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22668" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22668" class="commentcontent"><p>I definitely like B2 & E2. The Key (L) looks a little funny. I think most keys have a shoulder up next to the round part. Adding that might help.</p> </div> </li> <li id="comment-22669" class="comment byuser comment-author-lessbloat odd alt thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-27T14:19:47Z">2:19 pm <em>on</em> February 27, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22669" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22669" class="commentcontent"><p>Overall I think these are looking great. Ben has done an awesome job getting us to this point. All that’s left in my mind is a bunch of nit picky minor stuff to make them more cohesive.</p> <p><strong>My thoughts:</strong></p> <p>A – The top most rounded corner of the paintbrush seems off (could it be smoothed out)</p> <p>A – The width of the white line between the brush and the handle seems inconsistent with the rest of the white lines in the set (i.e. between the roof and the house in C)</p> <p>B2 – I prefer this one over B, but it still seems inconsistent when compared to the border radius on E & I.</p> <p>C – Lines here are all very straight compared to the other icons. Could we slip in some very slightly rounded corners?</p> <p>C.32 – I think it’s an optical illusion, but the gap between the roof and the house seems almost too thick.</p> <p>C.16 – The thickness of the roof is somewhat lacking, which causes it to appear lighter than the rest of the house</p> <p>D.32 – The thickness of the inner ring seems just right. The outer rings seem a tad thick.</p> <p>E2 – I like it. We should try to reduce the overall height to better match the other icons if possible. I like what acsearles said about oval terminals if we can work that in.</p> <p>F – Again, the straight edges stand out to me. Even slightly mouse nibbled corners would help bring this one inline with the others.</p> <p>G – I like it.</p> <p>H – Seems slightly too large</p> <p>H – You might be able to drop the hole at the bottom of the handle. It shows a level of detail that is not present it the rest of the icons, and I think it will make resizing the wrench a bit more manageable.</p> <p>I – If we can get away with two sliders, I think that would be best. As it stands it’s currently rather complex compared to the others.</p> <p>J – I like it.</p> <p>K – You might get away with flattening the bottom curvy line. It stands out to me since most of the other icons in the set have a flat bottom.</p> <p>L – I agree with Aaron Campbell Squaring off where the key meets the round part should help here.</p> <p>M – Rounding the corders of the tips of each cog might help</p> <p>M.32 – You could bring the inner circle here out a tad.</p> <p><strong>In general:</strong></p> <p>As Matt Thomas and others pointed out, we should take a close look at the size relationships, and see if there is anything we can do to make these more uniform.</p> <p>There seems to be a lack of consistency in line widths, as well as white spaces. Compare the roof in C, with the link widths in D, with the plug widths in G, and the pin needle width in J. They are all slightly different. Then compare the white spaces in-between the brush and the handle in A, with the roof and the house in C, with the space between links in D, with the white lines in F, G, and I. It’s super nit picky, and in several of those cases there might not be much that can be done about it. But it’s worth taking a second glance.</p> </div> </li> <li id="comment-22670" class="comment byuser comment-author-empireoflight even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="external nofollow" class="url">Empireoflight</a> <span class="meta"> <abbr title="2013-02-27T15:48:01Z">3:48 pm <em>on</em> February 27, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/26/icon-feedback/#comment-22670" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22670" class="commentcontent"><p><a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/162s2W3Y2T0X" rel="nofollow">http://cl.ly/image/162s2W3Y2T0X</a><br/> a: I smoothed out the curve at the top of the brush a bit, and added a few “eye” options. A palette will get to complicated at the small size. The eye seems creepy to me.<br/> b. I bumped the speech arrow over a pixel; a bit more like @acsearles recommended.<br/> c. I lowered the rook a bit so the white line is softer.<br/> d. Unchanged; I tried making the outer rings a bit skinnier but it looked too thin compared to the rest of the icons<br/> f. unchanged<br/> g. I made the stem slightly rounded per <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/mentions/helen/" class="mention">@helen</a>‘s suggestion. I don’t think we can put it in the same boat as paintbrush and wrench, as those terminate and the plug should suggest continuing outside the icon, but I think this is a decent compromise.<br/> h. nuked the hole. I like the hole.<br/> I. did a few variations. I like three sliders best.<br/> j. untouched<br/> k. straightened the bottom of the profile. I like the curve better, it suggests the old icons and makes it more human.<br/> l. Made the diaganol cogs a bit skinnier and the outer ring larger.<br/> m. Make the connection point to the main part of the key bigger. I tried flipping/rotating the key but it looked really weird. It has a precedent in the post icon so it’s not an anomolly.<br/> overall: I didn’t touch positioning or lining them up. They are in slightly different places based on their context in the menu, and if I line them up they look wack when seen in the menu. I didn’t touch scale; again, some may look too big or small but when I originally designed them I did it in context and they seem much better proportioned when seen that way.</p> </div> </li> </ul> <div class="respond-wrap" style="display: none; "> <div id="respond"> <h3 id="reply-title">Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20130302092326/http://make.wordpress.org/ui/#respond" style="display:none;">Cancel reply</a></small></h3> <p class="must-log-in">You must be <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F26%2Ficon-feedback%2F">logged in</a> to post a comment.</p> </div> </div></li> <li id="prologue-836" class="post-836 post type-post status-publish format-standard hentry category-uncategorized tag-hangout"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/matt/" title="Posts by Matt Mullenweg ( @matt )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=48&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/matt/" title="Posts by Matt Mullenweg ( @matt )">Matt Mullenweg</a> <span class="meta"> <abbr title="2013-02-25T17:08:59Z">5:08 pm <em>on</em> February 25, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/" class="thepermalink" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F25%2Fit-seems-to-be-moving-in-the-right%2F">Log in to leave a Comment</a> </span> <span class="tags"> <br/>Tags: hangout    </span> </span> </h4> <div id="content-836" class="postcontent"> <p>It seems to be moving in the right direction, but just to make sure we’re all on the same page let’s do a G+ hangout for discussing the Great Flattening — how about one of these times:</p> <ul> <li>Wednesday Feb 27 at 11a PST / 19h UTC.</li> <li>Thursday Feb 28 at 10:30a PST / 18:30h UTC.</li> <li>Saturday Mar 2 at 9a PST / 17h UTC.</li> </ul> <p>Leave your name and which times work for you, if any, and we’ll pick one.</p> </div> <div class="discussion" style="display: none"> <p> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://ma.tt/" rel="external nofollow" class="url">Matt Mullenweg</a>, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> lessbloat, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/2dc245d4cf9e5579dfb0e13e7dcb75db?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://choycedesign.com/" rel="external nofollow" class="url">Mel Choyce</a>, and 2 others are discussing. <a href="#" class="show-comments">Toggle Comments</a> </p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-836" class="commentlist inlinecomments"> <li id="comment-22641" class="comment byuser comment-author-empireoflight even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="external nofollow" class="url">Empireoflight</a> <span class="meta"> <abbr title="2013-02-25T23:02:50Z">11:02 pm <em>on</em> February 25, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/#comment-22641" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F25%2Fit-seems-to-be-moving-in-the-right%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22641" class="commentcontent"><p>Wednesday or Saturday works best for me.</p> </div> </li> <li id="comment-22642" class="comment byuser comment-author-helen odd alt thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="external nofollow" class="url">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-26T15:23:48Z">3:23 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/#comment-22642" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F25%2Fit-seems-to-be-moving-in-the-right%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22642" class="commentcontent"><p>Can do Wednesday or Thursday. Would like to work in-person with @melchoyce on Saturday, so before then would be good.</p> </div> </li> <li id="comment-22643" class="comment byuser comment-author-lessbloat even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-26T18:16:22Z">6:16 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/#comment-22643" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F25%2Fit-seems-to-be-moving-in-the-right%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22643" class="commentcontent"><p>Wed & Thur work for me.</p> </div> </li> <li id="comment-22663" class="comment byuser comment-author-melchoyce odd alt thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/2dc245d4cf9e5579dfb0e13e7dcb75db?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://choycedesign.com/" rel="external nofollow" class="url">Mel Choyce</a> <span class="meta"> <abbr title="2013-02-26T21:11:04Z">9:11 pm <em>on</em> February 26, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/#comment-22663" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F25%2Fit-seems-to-be-moving-in-the-right%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22663" class="commentcontent"><p>I can also do Wed or Thurs.</p> </div> </li> <li id="comment-22671" class="comment byuser comment-author-lessbloat even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-27T17:03:31Z">5:03 pm <em>on</em> February 27, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/#comment-22671" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F25%2Fit-seems-to-be-moving-in-the-right%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22671" class="commentcontent"><p>We’re going for a G+ hangout at 11:00 PST (2:00 EST).</p> </div> </li> <li id="comment-22672" class="comment byuser comment-author-matt odd alt thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://ma.tt/" rel="external nofollow" class="url">Matt Mullenweg</a> <span class="meta"> <abbr title="2013-03-01T01:41:28Z">1:41 am <em>on</em> March 1, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/25/it-seems-to-be-moving-in-the-right/#comment-22672" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F25%2Fit-seems-to-be-moving-in-the-right%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22672" class="commentcontent"><p>The meeting went great, we decided to take the icons out for now because it’ll be difficult to finish the vision by the beta on March 13th. More to announce next Friday.</p> </div> </li> </ul> </li> <li id="prologue-831" class="post-831 post type-post status-publish format-standard hentry category-uncategorized"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-12T14:10:15Z">2:10 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/" class="thepermalink" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to leave a Comment</a> </span> <span class="tags">   </span> </span> </h4> <div id="content-831" class="postcontent"> <h2><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/">Discuss: Icons </a></h2><p>If you’re running trunk, you’ve probably noticed some new icons being tried on for size. There’s ticket<a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/ticket/23333"> #23333</a> on Trac for them, but it’s quickly becoming overwhelming and I’d like to give design-minded folks a chance to focus in on the icons themselves and discuss without as much distraction regarding the rest of the admin (see<a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/ticket/23415"> #23415</a>, which absolutely goes hand-in-hand), SVG-vs-font-vs-plugins oh my, developer rabbit holes, etc. Trac just isn’t a great fit for some of the discussion, anyway.</p> <p>I’m seeing a few focal points for discussion:</p> <ul> <li>Icons themselves, from a graphic design standpoint. What works, what doesn’t, what might make this style of icon “WordPress-y”, other things that I personally (as a non-designer) can’t prompt very well.</li> <li>What kind of treatment flat/vector-style icons need to really work in the WordPress admin, e.g. hover states, colors, etc. Size is also perhaps a part of this, although do keep in mind that we can play with the sizing and styling of other elements as well.</li> <li>What other icons we need beyond the admin menu – post formats is definitely one, and perhaps we can also start thinking of other places that could use icons as a part of the visual vocabulary.</li> </ul> <p>Some helpful links from the 88 and counting comments on the ticket:</p> <ul> <li>The current icons in a 2x menu sprite, just to view on its own: <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/attachment/ticket/23333/menu-2x.png">http://core.trac.wordpress.org/attachment/ticket/23333/menu-2x.png</a></li> <li>The above icons as a font: <a href="https://web.archive.org/web/20130302092326/http://bendunkle.com/wp-admin-icons/">http://bendunkle.com/wp-admin-icons/</a></li> <li>Another set of icons, including post formats, from @melchoyce: <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png">http://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png</a></li> </ul> </div> <div class="discussion" style="display: none"> <p> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/99ab7c018336a3263f8f78bedc2d6500?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/hugobaeta/" rel="external nofollow" class="url">Hugo Baeta</a>, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="external nofollow" class="url">Empireoflight</a>, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> lessbloat, and 8 others are discussing. <a href="#" class="show-comments">Toggle Comments</a> </p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-831" class="commentlist inlinecomments"> <li id="comment-22612" class="comment byuser comment-author-helen even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="external nofollow" class="url">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-12T14:17:39Z">2:17 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22612" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22612" class="commentcontent"><p>I’d particularly like to see @empireoflight and @melchoyce combine forces and work to create a more complete set for use around the admin – there are elements in each set that seem very strong to me. Of course, I would think that any contributions are welcome; I’m just going with what’s been done so far so things keep moving.</p> <p>Post formats needs an icon for each of the 10 formats – not sure if standard should just use the regular pin icon or if there are any other icons than can be reused. I’m also seeing where an icon could be used in the inputs/textareas themselves – URL, quote, quote source, embed code/URL, image, and gallery. @melchoyce’s wireframes used icons and placeholder text rather than visible labels, so I’d like to at least give that look a shot. For the record, so nobody jumps on me, in my current patch, labels are still there, just not visible, and we’d need to keep it that way for accessibility.</p> </div> <ul class="children"> <li id="comment-22613" class="comment byuser comment-author-empireoflight odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="external nofollow" class="url">Empireoflight</a> <span class="meta"> <abbr title="2013-02-12T14:31:28Z">2:31 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22613" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22613" class="commentcontent"><p>Happy to do that. @melochoyce, maybe we can do a skype screen share?</p> </div> <ul class="children"> <li id="comment-22620" class="comment byuser comment-author-melchoyce even depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/2dc245d4cf9e5579dfb0e13e7dcb75db?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://choycedesign.com/" rel="external nofollow" class="url">Mel Choyce</a> <span class="meta"> <abbr title="2013-02-13T04:16:21Z">4:16 am <em>on</em> February 13, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22620" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22620" class="commentcontent"><p>Sounds great! Let’s touch base through email (melissachoyce@gmail.com) or IRC to plan a time.</p> </div> </li> </ul> </li> <li id="comment-22614" class="comment byuser comment-author-lessbloat odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-12T14:41:10Z">2:41 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22614" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22614" class="commentcontent"><p>Would also be nice to do the welcome screen icons while we’re at it. <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"/> </p> </div> <ul class="children"> <li id="comment-22616" class="comment byuser comment-author-helen even depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="external nofollow" class="url">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-12T14:44:38Z">2:44 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22616" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22616" class="commentcontent"><p>Ooh, good call. Feel free to list off any other existing ones that could use a revamp, along with new ones that could be useful <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> </li> </ul> </li> </ul> </li> <li id="comment-22615" class="comment byuser comment-author-esmi odd alt thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/0d9561ad86e233e23263cbbeaeb418cc?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://codex.wordpress.org/User:Esmi" rel="external nofollow" class="url">esmi</a> <span class="meta"> <abbr title="2013-02-12T14:43:48Z">2:43 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22615" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22615" class="commentcontent"><p>Speaking from a purely design/usability pov, I find the darkness/heaviness of <a href="https://web.archive.org/web/20130302092326/http://bendunkle.com/wp-admin-icons/" rel="nofollow">http://bendunkle.com/wp-admin-icons/</a> somewhat intrusive when it comes to readability. Any chance we could lighten them (a la the current icon set) and then revert to a heavier/darker version hover and onfocus? That might also sidestep the accessibility issues of using red as a highlight color. The Post and Appearance icons look rather similar to me at first glance. Perhaps the Post icon could be swapped out for the more stylised pin in <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png" rel="nofollow">http://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png</a></p> </div> <ul class="children"> <li id="comment-22634" class="comment byuser comment-author-chipbennett even depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1299e8d336a2d5faa4fc440d07ea44f8?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.chipbennett.net/" rel="external nofollow" class="url">Chip Bennett</a> <span class="meta"> <abbr title="2013-02-16T13:35:33Z">1:35 pm <em>on</em> February 16, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22634" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22634" class="commentcontent"><p>That\’s my biggest complaint thus far: Post, Appearance, and Plugin icons are all way too similar. Also: I don\’t get \”paintbrush\” = \”appearance\”. (I assume that\’s what the appearance icon is?) IMHO, a paintbrush implies \”format\” or \”color\”, not header/background/Theme options.</p> </div> </li> </ul> </li> <li id="comment-22617" class="comment byuser comment-author-mercime odd alt thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/fae451be6708241627983570a1a1817a?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://buddypress.org/community/members/mercime/" rel="external nofollow" class="url">@mercime</a> <span class="meta"> <abbr title="2013-02-12T17:23:12Z">5:23 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22617" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22617" class="commentcontent"><p>I’m all for the icon fonts by Ben Dunkle. Instead of making heavy/solid icon fonts, how about making it outlines instead for a cleaner look? Compare bbPress and BuddyPress outline icons with solid wp-admin icons <a href="https://web.archive.org/web/20130302092326/http://mercime.files.wordpress.com/2013/02/wp-admin-buddypress-bbpress.png?w=145" rel="nofollow">http://mercime.files.wordpress.com/2013/02/wp-admin-buddypress-bbpress.png?w=145</a></p> </div> </li> <li id="comment-22618" class="comment byuser comment-author-empireoflight even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="external nofollow" class="url">Empireoflight</a> <span class="meta"> <abbr title="2013-02-12T19:53:34Z">7:53 pm <em>on</em> February 12, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22618" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22618" class="commentcontent"><p>@mercime, the outlined look doesn’t translate to an icon font very easily; hence the solid icons. However, it gives me an idea for an “open face” icon set, as a variation on the theme.<br/> As for the icons looking too large, the intention is for more padding to be added but we’re playing w/that. They do seem a bit dark, but the great thing is you can quickly change the color w/css.</p> </div> </li> <li id="comment-22619" class="comment byuser comment-author-hugobaeta odd alt thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/99ab7c018336a3263f8f78bedc2d6500?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/hugobaeta/" rel="external nofollow" class="url">Hugo Baeta</a> <span class="meta"> <abbr title="2013-02-13T00:14:50Z">12:14 am <em>on</em> February 13, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22619" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22619" class="commentcontent"><p>What if the icons were a very light embossed look? (it could still be an icon font, with text-shadow to create the effect).</p> <p>I am with the other comments I’ve seen, the icons look too bold there. One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?</p> <p>On a discussion with @koop he made a mockup of a super minimalist menu, removing the divider lines and adding more padding to the items. It felt so airy and light, I loved it! I’ll try to reproduce it and make a screenshot for y’all.</p> </div> <ul class="children"> <li id="comment-22622" class="comment byuser comment-author-hugobaeta even depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/99ab7c018336a3263f8f78bedc2d6500?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/hugobaeta/" rel="external nofollow" class="url">Hugo Baeta</a> <span class="meta"> <abbr title="2013-02-13T07:23:09Z">7:23 am <em>on</em> February 13, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22622" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22622" class="commentcontent"><p><img src="https://web.archive.org/web/20130302092326im_/http://f.cl.ly/items/0h0e2i030U2i303b2B3M/admin-cromeless-menu.png" class="alignright"/></p> <p>ok, talked with <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/mentions/koopersmith/" class="mention">@koopersmith</a> before posting this here. One important thing to take note is that I don’t intend to distract from the discussion about the icons with the other changes showed in this screenshot. But it’s an interesting new way to look at the menu. Also keep in mind that the menu simplification is not my doing, but Koop’s and I love it so much I use it on my installations <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_razz.gif" alt=":P" class="wp-smiley"/> </p> <p>This said, here’s what I did: ( <a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/0a3S0a2G053I" rel="nofollow">http://cl.ly/image/0a3S0a2G053I</a> )</p> <ul> <li>reduced the opacity of the icons</li> <li>increased the margin around them</li> </ul> <p>What do you think?</p> </div> <ul class="children"> <li id="comment-22624" class="comment byuser comment-author-lessbloat odd alt depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-14T20:00:15Z">8:00 pm <em>on</em> February 14, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22624" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22624" class="commentcontent"><p>Really loving this @hugobaeta. Nice work with that screenshot!</p> </div> </li> <li id="comment-22625" class="comment byuser comment-author-lessbloat even depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-14T20:10:55Z">8:10 pm <em>on</em> February 14, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22625" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22625" class="commentcontent"><p>Here’s a before and after comparison:</p> <p><img src="https://web.archive.org/web/20130302092326im_/http://f.cl.ly/items/0t1f0L1K1o3A1P0f0q1j/visual-comparison.jpg"/></p> <p>There is so much less for your brain to process with the one on the right. Though I’d argue that we could probably go even smaller with the icons there.</p> </div> <ul class="children"> <li id="comment-22626" class="comment byuser comment-author-ipstenu odd alt depth-4"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/abfd4ff9c24957f1a9f0435e23de1f73?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://halfelf.org/" rel="external nofollow" class="url">Ipstenu (Mika Epstein)</a> <span class="meta"> <abbr title="2013-02-14T20:36:55Z">8:36 pm <em>on</em> February 14, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22626" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22626" class="commentcontent"><p>I think that size is really good. Smaller and you start running into readability issues with people who don’t have aces vision. (And telling me to +1 font size in my wp-admin is a crap answer, by the way.) We COULD go smaller, but I think this is a really nice balance between size and all-around readability.</p> </div> <ul class="children"> <li id="comment-22628" class="comment byuser comment-author-lessbloat even depth-5"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-15T14:38:57Z">2:38 pm <em>on</em> February 15, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22628" title="Permalink">Permalink</a> </span> </span> </h4> <div id="commentcontent-22628" class="commentcontent"><p>As a clarification, I said smaller icons, not smaller text. <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"/> Smaller icons would command less attention and actually improve readability for the text.</p> </div> </li> <li id="comment-22629" class="comment byuser comment-author-ipstenu odd alt depth-5"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/abfd4ff9c24957f1a9f0435e23de1f73?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://halfelf.org/" rel="external nofollow" class="url">Ipstenu (Mika Epstein)</a> <span class="meta"> <abbr title="2013-02-15T16:37:59Z">4:37 pm <em>on</em> February 15, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22629" title="Permalink">Permalink</a> </span> </span> </h4> <div id="commentcontent-22629" class="commentcontent"><p>I dunno, visual ‘readability’ of icons also suffers at smaller sizes. This icon size is really perfect. I feel like I’m not missing out on details and I can clearly see what everything is easily. If you made the images smaller, the thing lines in the images themselves would lose distinction.</p> </div> </li> <li id="comment-22630" class="comment byuser comment-author-hugobaeta even depth-5"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/99ab7c018336a3263f8f78bedc2d6500?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/hugobaeta/" rel="external nofollow" class="url">Hugo Baeta</a> <span class="meta"> <abbr title="2013-02-15T17:06:40Z">5:06 pm <em>on</em> February 15, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22630" title="Permalink">Permalink</a> </span> </span> </h4> <div id="commentcontent-22630" class="commentcontent"><p>My point with going smaller with the icons was also to go simpler, reduce detail. If you look at the old icons, they look “smaller” and more elegant comparing to these new ones, because the new ones are a solid block instead of gentle lines with highlights.</p> </div> </li> <li id="comment-22631" class="comment byuser comment-author-ipstenu odd alt depth-5"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/abfd4ff9c24957f1a9f0435e23de1f73?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://halfelf.org/" rel="external nofollow" class="url">Ipstenu (Mika Epstein)</a> <span class="meta"> <abbr title="2013-02-15T17:14:37Z">5:14 pm <em>on</em> February 15, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22631" title="Permalink">Permalink</a> </span> </span> </h4> <div id="commentcontent-22631" class="commentcontent"><p>Hugo, the current ones are so small for me I have a hard time noticing the visual diff between Feedback and Appearance today. Smaller images will lose pattern recognition ability (I don’t know if that’s the right term…) and make it harder to tell everything apart at a quick scan when you collapse the bar. A lot of people cannot collapse the sidebar now because they lose the ability to tell what’s what when they do.</p> <p>Since we’re already removing the detail and going with flatter images, which I like by the way, we have to make sure to keep them distinct. I feel smaller will lose that.</p> </div> </li> <li id="comment-22632" class="comment byuser comment-author-hugobaeta even depth-5"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/99ab7c018336a3263f8f78bedc2d6500?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/hugobaeta/" rel="external nofollow" class="url">Hugo Baeta</a> <span class="meta"> <abbr title="2013-02-15T17:18:59Z">5:18 pm <em>on</em> February 15, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22632" title="Permalink">Permalink</a> </span> </span> </h4> <div id="commentcontent-22632" class="commentcontent"><p>and, actually, the old ones ARE smaller! Here’s the evidence:</p> <p><img src="https://web.archive.org/web/20130302092326im_/http://f.cl.ly/items/0J0d0d3g1W3i1r3o0D26/visual-comparison-iconsize.png"/></p> </div> </li> <li id="comment-22633" class="comment byuser comment-author-hugobaeta odd alt depth-5"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/99ab7c018336a3263f8f78bedc2d6500?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/hugobaeta/" rel="external nofollow" class="url">Hugo Baeta</a> <span class="meta"> <abbr title="2013-02-15T17:28:53Z">5:28 pm <em>on</em> February 15, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22633" title="Permalink">Permalink</a> </span> </span> </h4> <div id="commentcontent-22633" class="commentcontent"><p>Fair argument @ipstenu. But if the icons are getting bigger, then the text also needs to follow that to keep proportion. Maybe that’s exactly what the menu needs… do you guys remember how clear the old (pre 2.7) menus were? yes, the horizontal blue bar at the top!</p> <p>quick mockup with inspector:</p> <p><img src="https://web.archive.org/web/20130302092326im_/http://f.cl.ly/items/2Q3b3m2C1f3d0R0W2i40/proportion.png"/></p> </div> </li> </ul> </li> </ul> </li> <li id="comment-22636" class="comment byuser comment-author-melchoyce even depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/2dc245d4cf9e5579dfb0e13e7dcb75db?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://choycedesign.com/" rel="external nofollow" class="url">Mel Choyce</a> <span class="meta"> <abbr title="2013-02-21T00:51:31Z">12:51 am <em>on</em> February 21, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22636" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22636" class="commentcontent"><p>Late to the game on these, but just wanted to comment on how much I like this layout & grouping. I think we could play with spacing and division between content & settings a little more, but this feels like a much nicer fit for the new icons.</p> </div> </li> </ul> </li> <li id="comment-22623" class="comment byuser comment-author-drewstrojny odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/bf2b361113b9b05772066ff2924e9245?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://thethemefoundry.com/" rel="external nofollow" class="url">Drew Strojny</a> <span class="meta"> <abbr title="2013-02-14T14:56:46Z">2:56 pm <em>on</em> February 14, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22623" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22623" class="commentcontent"><blockquote><p>One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?</p></blockquote> <p>I haven’t read through much of the discussion to date, but this is the first thing that jumped out at me when I updated and saw the current flat icons. While I love them, they look disproportionately large and out of place to me in the current menu. +1 for making them smaller and/or re-evaluating the proportions of the surrounding elements. I think Hugo / Koop are on the right track with the screenshot.</p> <p>I also think <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/mentions/lessbloat/" class="mention">@lessbloat</a> echoed similar comments in the Trac ticket and provided a screenshot of a non-gradient version with more spacing, which I also think is on the right track.</p> <p>I’m also not a big fan of the white hover on the current background. Not enough contrast. I’d say a subtle change to a lighter grey when hovering would work well.</p> </div> </li> </ul> </li> <li id="comment-22621" class="comment byuser comment-author-helen even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://helen.wordpress.com/" rel="external nofollow" class="url">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-13T06:22:29Z">6:22 am <em>on</em> February 13, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22621" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22621" class="commentcontent"><p>Something that came up while I was talking to <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/mentions/koopersmith/" class="mention">@koopersmith</a> about something else entirely – the toolbar icons seem to really work well in terms of language and staying power, and maybe even personality, as minimal as they are. The admin menu icons in trunk clash somehow – perhaps it’s the roundness, perhaps it’s something else. That part I can’t quite quantify. What I’m trying to say is that I think the existing toolbar icons are an important starting influence <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> The admin menu icons are less a cue and more a unique reference, so they do function a bit differently, but having two different styles of vector icons is going to give a disjointed experience.</p> </div> </li> <li id="comment-22627" class="comment byuser comment-author-archetyped odd alt thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/aea664c9693244fe9564c205034ef7e0?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://archetyped.com/" rel="external nofollow" class="url">Archetyped</a> <span class="meta"> <abbr title="2013-02-14T20:37:44Z">8:37 pm <em>on</em> February 14, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22627" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22627" class="commentcontent"><p>Thank you for starting this discussion @empireoflight and thanks to <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/mentions/helen/" class="mention">@helen</a> for bringing the discussion out of Trac (is it okay to say it’s chaos in there?).</p> <p>I’m curious what the “official” goal for this potential icon reboot is? “Scalability and utility” (as put forth by @empireoflight) are good reasons, but are they a higher priority for WP than things like branding and personality? </p> <p>These icons feel rather “generic” to me. While the official icons have their flaws, they are unique and give WP a particular flaire that helps to identify WP as “different”.</p> <p>It’s not about flat vs shaded, it’s about identity. Sure, generic icons would definitely make it easier to implement WP as a white-label CMS for clients, but I for one would feel the loss of a certain amount of whimsy and fun that drew me to WP those many years ago.</p> </div> </li> <li id="comment-22635" class="comment byuser comment-author-chipbennett even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1299e8d336a2d5faa4fc440d07ea44f8?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.chipbennett.net/" rel="external nofollow" class="url">Chip Bennett</a> <span class="meta"> <abbr title="2013-02-16T13:41:32Z">1:41 pm <em>on</em> February 16, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22635" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22635" class="commentcontent"><p>Are these icons being tested with the menu both expanded and collapsed?</p> <p>Most of the icons make sense, but in the collapsed state, the old \”Appearance\” icon is far more meaningful than the new one, IMHO.</p> </div> </li> <li id="comment-22637" class="comment byuser comment-author-lessbloat odd alt thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-02-21T16:32:00Z">4:32 pm <em>on</em> February 21, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22637" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22637" class="commentcontent"><p>Was chatting with @joen about the icons, and he mocked up:</p> <p><img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/files/2013/02/wpicons.png"/></p> <p>As a riff on some of the icons styles. Posting it here to add to the existing discussion.</p> </div> </li> <li id="comment-22638" class="comment byuser comment-author-empireoflight even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/1772cd53f2747f71c8455ac820606afc?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://field2.com/" rel="external nofollow" class="url">Empireoflight</a> <span class="meta"> <abbr title="2013-02-22T12:40:04Z">12:40 pm <em>on</em> February 22, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22638" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22638" class="commentcontent"><p>I did a ton of tweaking, both the images and css last night. Icons are a bit smaller still and include an orange hover state (it should be orange like the text, not white). It’s pretty much what we currently have in 3.5 with new icons. I used @melchoyce ‘s suggestions for the angled plug; Mel, let’s talk soon about the post format and other icon.s I added an active state into the menu sprite. I’ll submit it to trac today, but here’s the preview: <a href="https://web.archive.org/web/20130302092326/http://cl.ly/image/2j0a3F2W271b" rel="nofollow">http://cl.ly/image/2j0a3F2W271b</a> (how do I insert images directly to this thread?)</p> </div> <ul class="children"> <li id="comment-22640" class="comment byuser comment-author-hugobaeta odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/99ab7c018336a3263f8f78bedc2d6500?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/hugobaeta/" rel="external nofollow" class="url">Hugo Baeta</a> <span class="meta"> <abbr title="2013-02-25T21:36:01Z">9:36 pm <em>on</em> February 25, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/12/discuss-icons/#comment-22640" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F12%2Fdiscuss-icons%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22640" class="commentcontent"><p>Hey @empireoflight – I like what you did there, the size reduction makes them feel a bit more proportional. And the all gray treatment (including text) also makes the new icons fit better.</p> <p>To include an image inline, just write the html for it <code><img src="</code>… <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley"/> </p> </div> </li> </ul> </li> </ul> </li> <li id="prologue-826" class="post-826 post type-post status-publish format-status hentry category-uncategorized"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )">lessbloat</a> <span class="meta"> <abbr title="2013-02-07T20:24:30Z">8:24 pm <em>on</em> February 7, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/07/heres-round-7-of-our-menus-usability-tests/" class="thepermalink" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F07%2Fheres-round-7-of-our-menus-usability-tests%2F">Log in to leave a Comment</a> </span> <span class="tags">   </span> </span> </h4> <div id="content-826" class="postcontent"> <p>Here’s round 7 of our menus usability tests with <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/ticket/23119#comment:181">23119.25.diff</a> applied.</p> <h3>User #13</h3> <p>Here’s <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC5-13.mp4">the video</a>.</p> <p><strong>Step 1: Log in</strong></p> <p>No issues.</p> <p><strong>Step 2: Go to menus</strong></p> <p>No issues.</p> <p><strong>Step 3: Reorganize pages</strong></p> <p>No issues.</p> <p><strong>Step 4: Preview changes</strong></p> <p>No issues.</p> <p><strong>Step 5: Remove menu item</strong></p> <p>No issues.</p> <p><strong>Step 6: Add another menu</strong></p> <p>3:50 – He struggled to notice the “Add Menu” link. He finds it at 4:10.</p> <p><strong>Step 7: Add links</strong></p> <p>No issues.</p> <h3>User #14</h3> <p>Here’s <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC5-14.mp4">the video</a>.</p> <p><strong>Step 1: Log in</strong></p> <p>No issues.</p> <p><strong>Step 2: Go to menus</strong></p> <p>No issues.</p> <p><strong>Step 3: Reorganize pages</strong></p> <p>No issues.</p> <p><strong>Step 4: Preview changes</strong></p> <p>No issues.</p> <p><strong>Step 5: Remove menu item</strong></p> <p>No issues.</p> <p><strong>Step 6: Add another menu</strong></p> <p>No issues.</p> <p><strong>Step 7: Add links</strong></p> <p>No issues.</p> <h3>Observations/Thoughts</h3> <ul> <li>I feel like these speak for themselves. <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"/> </li> <li>The first user had a bit of trouble finding the “Add Menu” link, but I’m okay with that seeing as a) it conforms to the way other “add new” links are done in the admin, and is likely much easier for users who have used WP before to any degree, b) as we’ve <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/core/2013/01/29/menus-office-hours-recap-jan-28/#comment-7828">discussed</a> adding more than one menu is somewhat of an edge case for the majority of users.</li> </ul> <p>Thoughts?</p> </div> <div class="discussion" style="display: none"> <p> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/53f7e24dd4f84b7d83e14d176ee91b0a?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://mycircletree.com/" rel="external nofollow" class="url">Bob Gregor</a> and <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/8fac9a834778de5a3b7b26fb28cff956?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/jkudish/" rel="external nofollow" class="url">Joey Kudish</a> are discussing. <a href="#" class="show-comments">Toggle Comments</a> </p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-826" class="commentlist inlinecomments"> <li id="comment-22610" class="comment byuser comment-author-jkudish even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/8fac9a834778de5a3b7b26fb28cff956?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/jkudish/" rel="external nofollow" class="url">Joey Kudish</a> <span class="meta"> <abbr title="2013-02-07T20:30:29Z">8:30 pm <em>on</em> February 7, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/07/heres-round-7-of-our-menus-usability-tests/#comment-22610" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F07%2Fheres-round-7-of-our-menus-usability-tests%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22610" class="commentcontent"><p>sweet!</p> </div> </li> <li id="comment-22639" class="comment byuser comment-author-bobbravo2 odd alt thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/53f7e24dd4f84b7d83e14d176ee91b0a?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://mycircletree.com/" rel="external nofollow" class="url">Bob Gregor</a> <span class="meta"> <abbr title="2013-02-22T19:05:21Z">7:05 pm <em>on</em> February 22, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/07/heres-round-7-of-our-menus-usability-tests/#comment-22639" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F07%2Fheres-round-7-of-our-menus-usability-tests%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22639" class="commentcontent"><p>I have to agree with user #14 at around 3:10: “how do I create a new menu?” hmmm….a HA! there it is up top. there is a good 4 second pause.</p> <p>I think the add new menu need to be a little more prominent – the problem is that on the edit screen there are a lot of items in the visual field. I think part of the problem is that the “Menu 1 has been Updated.” message creates a giant dividing line in the visual field. If we have it auto slide up after a few seconds, it will make it cleaner, and make it easier for a user’s eyes to drift up to “Menus – add new”</p> </div> </li> </ul> </li> <li id="prologue-825" class="post-825 post type-post status-publish format-status hentry category-uncategorized"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )">lessbloat</a> <span class="meta"> <abbr title="2013-02-05T19:10:51Z">7:10 pm <em>on</em> February 5, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/05/i-tested-two-more-users-on-our-menus/" class="thepermalink" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F05%2Fi-tested-two-more-users-on-our-menus%2F">Log in to leave a Comment</a> </span> <span class="tags">   </span> </span> </h4> <div id="content-825" class="postcontent"> <p>I tested two more users on our menus scenarios with <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/ticket/23119#comment:168">23119.23.diff</a> applied. With the addition of the <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/ticket/23119#comment:163">zero menus</a> state, I had to modify the script a bit, as it eliminated the need to 1) create a menu, 2) add menu items, and 3) assign your first menu to a theme location for first time users.</p> <p> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/05/i-tested-two-more-users-on-our-menus/#more-825" class="more-link">(More …)</a></p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-825" class="commentlist inlinecomments"> </ul> </li> <li id="prologue-822" class="post-822 post type-post status-publish format-standard hentry category-uncategorized"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-02-04T20:50:41Z">8:50 pm <em>on</em> February 4, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/04/round-3-of-post-format-ui-user-testing/" class="thepermalink" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F04%2Fround-3-of-post-format-ui-user-testing%2F">Log in to leave a Comment</a> </span> <span class="tags">   </span> </span> </h4> <div id="content-822" class="postcontent"> <p>Round 3 of post format UI user testing, using Crowd Favorite’s code for UI and display fallbacks along with San Kloud as the theme.</p> <p><strong>Tasks:</strong></p> <ol> <li>Login</li> <li>Look at the Dashboard and get to add post from toolbar</li> <li>Add a (standard) blog post with title and text</li> <li>Preview your blog</li> <li>Add an image blog post, with image from a URL</li> <li>Add a video post, with YouTube video URL provided</li> <li>Add a link blog post</li> <li>Add a quote blog post</li> <li>Add a gallery post</li> <li>Preview your blog again to see all the posts</li> </ol> <p><strong>Test 1: <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC7-5.mp4">http://wpusertesting.com/videos/DC7-5.mp4</a></strong></p> <p>Note: there are a lot of comments in the video that are interesting but not relevant to the task at hand. Leaving out for the sake of brevity.</p> <ol> <li>Fine.</li> <li>Fine.</li> <li>Notes that that that was not where he was expecting to see the Publish button; seems to also feel that the box is overfull with all the options.</li> <li>Notes that it isn’t a preview so much as just viewing what you did.</li> <li>Finds the format tabs and chooses Image. Saves the image but not sure he needs to. Doesn’t see anything specific to an image post in the UI and finds it confusing. Goes to Add Media and finds the Insert from URL panel. Fills in the extra fields for caption, etc.</li> <li>Wants to watch the video in the editor.</li> <li>Notices that there’s no http:// in the URL field. Discovers that without http:// the display fallback code just shows “View on”, which is confusing.</li> <li>Wants a clear field for the quotation itself and for the field layout to reflect how it’s usually seen in the front. Notes that there’s no indication about whether or not the source URL field is required. On preview, notices that the display cuts off a word – thinks it shouldn’t truncate words, but would really rather be able to change the title.</li> <li>Uses the “Add images” button. Discovers shift-click. Wonders why one is blue – maybe the cover of the gallery? Doesn’t see a way to drag/drop them into a different order. New media modal inserts into the content editor rather than updating the Gallery Images area.</li> <li>Notices a post called “47″ – the image post that didn’t have a title. Thinks the title should have been the image caption he specified.</li> </ol> <p>Overall observations:</p> <ul> <li>He’s opinionated <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> Watch the whole video to see.</li> <li>The output fallback seems to be helpful. Otherwise the theme wouldn’t show any of the data he entered and then who knows what the opinion might have been.</li> <li>What other fallbacks might need to be in place for auto-generating of titles?</li> </ul> <p><strong>Test 2: <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC7-6.mp4">http://wpusertesting.com/videos/DC7-6.mp4</a></strong></p> <ol> <li>Fine.</li> <li>Had to click the New menu in the toolbar to get the dropdown. Not sure what was going on there.</li> <li>Also has to scroll around briefly to find the Publish button, but doesn’t seem concerned about it.</li> <li>Fine. (Still the toolbar dropdown issue.)</li> <li>Chooses the image format tab. Just pastes the image URL into the content editor; isn’t clear where it was supposed to go.</li> <li>Puts the video URL in the specified fields; notes that there wasn’t such a field for image.</li> <li>Adds title to a regular post first, then switches to Link. Types URL with www but without <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/" rel="nofollow">http://</a>.</li> <li>Fine.</li> <li>Uses the “Add images” button. Discovers shift-click. Uses “Insert into post”, as it’s the only option. Same effect as the previous test.</li> <li>Doesn’t see my favorite website, is afraid to click the link. Notices that the picture isn’t there. Video post is missing but she doesn’t seem to notice.</li> </ol> <p>Overall observations:</p> <ul> <li>Found it easy to choose different formats for her blog post. Found WP overall to be easy to use, even with some of the things that seemed to not quite work.</li> <li>This time, both users were concerned about the ordering of the images in the gallery.</li> </ul> </div> <div class="discussion" style="display: none"> <p> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/2801f5145de98010dd72f1ac6d92938f?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://john.do/" rel="external nofollow" class="url">John Saddington</a> is discussing. <a href="#" class="show-comments">Toggle Comments</a> </p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-822" class="commentlist inlinecomments"> <li id="comment-22611" class="comment byuser comment-author-tentblogger even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/2801f5145de98010dd72f1ac6d92938f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://john.do/" rel="external nofollow" class="url">John Saddington</a> <span class="meta"> <abbr title="2013-02-09T14:03:21Z">2:03 pm <em>on</em> February 9, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/02/04/round-3-of-post-format-ui-user-testing/#comment-22611" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F02%2F04%2Fround-3-of-post-format-ui-user-testing%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22611" class="commentcontent"><p>i have thought about the order of images as well. neat to see a new user capture that too.</p> </div> </li> </ul> </li> <li id="prologue-819" class="post-819 post type-post status-publish format-status hentry category-usability-testing tag-3-6 tag-post-formats"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-01-31T16:03:11Z">4:03 pm <em>on</em> January 31, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/31/have-made-it-through-the-second-round-of/" class="thepermalink" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F31%2Fhave-made-it-through-the-second-round-of%2F">Log in to leave a Comment</a> </span> <span class="tags"> <br/>Tags: <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/tag/3-6/" rel="tag">3.6 ( 2 )</a>, post formats    </span> </span> </h4> <div id="content-819" class="postcontent"> <p>Have made it through the second round of user testing videos for post formats (thanks, <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/mentions/lessbloat/" class="mention">@lessbloat</a>). These were on core as-is, using Twenty Twelve as the theme. Should have switched to San Kloud to enable all formats, but it actually may not have made much of a difference for these. There’s a third round still to watch and annotate.</p> <p><strong>Tasks:</strong></p> <ol> <li>Login</li> <li>Look at the Dashboard and get to add post from toolbar</li> <li>Add a (standard) blog post with title and text</li> <li>Preview your blog</li> <li>Add an image blog post, with image from a URL</li> <li>Add a video post, with YouTube video URL provided</li> <li>Add a link blog post</li> <li>Add a quote blog post</li> <li>Add a gallery post</li> <li>Preview your blog again to see all the posts</li> </ol> <p><strong>Test 1: <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC7-3.mp4">http://wpusertesting.com/videos/DC7-3.mp4</a></strong></p> <ol> <li>Fine</li> <li>Fine</li> <li>Takes a moment finding the Publish button, but otherwise fine.</li> <li>Fine</li> <li>Notices it says nothing about a title; adds one anyway. Uses Add Media -> Insert from URL.</li> <li>Again goes to Add Media -> Insert from URL. Inserts the video, which gets linked. Doesn’t work for oEmbed to have it linked <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"/> Again adds a title herself</li> <li>Again goes to Add Media -> Insert from URL, but says she doesn’t think she’s doing it right. Tries to click the link that’s inserted in the editor to check if it goes to the right place.</li> <li>Corrects then to than <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley"/> Adds it as plain text in the editor.</li> <li>Add Media -> Media Library (woo!) Selects the three images using multi-select and inserts them all into the post.</li> <li>Checks the sesamestreet.org link, which works. Then she closes the tab, so it’s over before getting to see some things like video.</li> </ol> <p>Overall observations:</p> <ul> <li>She never once noticed the post formats metabox or wondered why the instructions were telling her to write blog posts of various kinds.</li> <li>Not having a title bothered her a bit, perhaps because it looks so important/required.</li> <li>The media modal certainly seems usable/comfortable, as she kept returning to it and was really quite handy with it.</li> </ul> <p><strong>Test 2: <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC7-4.mp4">http://wpusertesting.com/videos/DC7-4.mp4</a></strong></p> <ol> <li>A little copy paste mishap, but otherwise fine</li> <li>Fine</li> <li>Scrolls to look for the Publish button, then has to digest the whole Publish metabox to find the button. After publish, does not expect to stay on the edit screen, because she’s “done” / ready to move on.</li> <li>Fine</li> <li>Opens the URL and drags the images over to the other tab directly and drops into TinyMCE. Observes that more and more things on the computer support drag and drop, so it’s a familiar mechanism.</li> <li>Looks immediately for embed code. Copies and pastes code into the Visual editor; observes that it doesn’t show her what it will look like. Says that she would preview the post, but the test doesn’t say to do so, so she doesn’t. Wonders if there’s another way to embed; finds the format metabox. Selects “Link” and updates. Notes that changing and updating doesn’t seem to make anything look different. Wonders what it’s for – maybe a layout, but doesn’t make a difference to her.</li> <li>Remembers the format she discovered in the last task and selects it. Notes she wants selecting a format to come before adding information (not sure if flow or layout wise); because it’s under Publish she doesn’t notice it, and considers anything under there to be of use after publishing. Says she always previews/checks posts for formatting on her own blog <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> Wonder what she uses…</li> <li>Selects format – “What is the difference here, exactly?” Is really expecting the editor area to change with selecting a format; wonders what the value even is.</li> <li>Selects Image format, presumably because Gallery isn’t available in Twenty Twelve. Looks around and eventually finds “Add Media”. Figures out to use shift to do a multiselect. Inserts them all; wonders if she did something wrong but notices that it’s formatted/shows images in the editor. Now wonders if Add Media should have been used for embedding the video to get a nice formatted view.</li> <li>Notices the “Link” flag on that post, but it doesn’t seem otherwise formatted. Considers lack of formatting in various posts to be a consequence of her mistakes.</li> </ol> <p>Overall observations:</p> <ul> <li>Whenever a user thinks that it is their mistake that something didn’t make a difference or work right, we really need to look at how to fix that – to help them avoid the mistake in the first place and feel confident that they know what to do or can figure it out.</li> <li>This could have been one of us testing such a feature. Her observations are all very astute – there’s no value in selecting a format when editing, which was further enforced by the theme display; the location on the screen is counter-intuitive to workflow; oEmbed is buried/not discoverable (and not just by WP); creating galleries as opposed to batch insertion is not something naturally thought about; and “Add Media” quickly becomes a familiar place to do more than insert images or upload files.</li> </ul> </div> <div class="bottom-of-entry"> </div> <ul id="comments-819" class="commentlist inlinecomments"> </ul> </li> <li id="prologue-816" class="post-816 post type-post status-publish format-standard hentry category-uncategorized tag-3-6"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/helen/" title="Posts by Helen Hou-Sandi ( @helen )">Helen Hou-Sandi</a> <span class="meta"> <abbr title="2013-01-21T22:26:26Z">10:26 pm <em>on</em> January 21, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/21/3-6-core-development-cycle/" class="thepermalink" title="Permalink">Permalink</a> </span> <span class="tags"> <br/>Tags: <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/tag/3-6/" rel="tag">3.6 ( 2 )</a>    </span> </span> </h4> <div id="content-816" class="postcontent"> <h2><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/21/3-6-core-development-cycle/">3.6 Core Development Cycle </a></h2><p>If you’re looking to contribute to core UI, you’ll want to keep an eye on <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/core/">Make/Core</a>, as we’re shifting our thinking of core UI contributions to being an integral part of various areas of core rather than a separate group/workflow/etc. All of the planned features for 3.6 include UI components and participation in them is highly encouraged. Office hours are either set or being set for each team and will be held in #wordpress-dev, so as always, feel free to join discussions as they’re held, whether in IRC, on the Make/Core P2, Trac, or elsewhere. Regular updates/summaries will be posted on that P2.</p> <p>Also, as you’ve probably noticed, we haven’t been having weekly UI group chats, due to a combination of the end of the 3.5 cycle and a shift in how we’re thinking about this group. For more, see <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/mentions/jenmylo/" class="mention">@jenmylo</a>‘s comment: <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2012/11/16/coming-soon-weekly-updates/#comment-22558" rel="nofollow">http://make.wordpress.org/ui/2012/11/16/coming-soon-weekly-updates/#comment-22558</a>. The #wordpress-ui IRC channel is always open, and we can use it for UI-focused discussions if #wordpress-dev is otherwise focused on something, but let’s all get comfortable in #wordpress-dev, too <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> <p>One last thing: this shift in thinking also applies to Trac. Right now there is a “UI” component, which is a bit of a mess and ultimately not a great help for watching for tickets of interest, as UI-related items are just as often found in other components. We’re working on emptying the component out by moving things into more relevant components (Administration is a good fallback if you don’t see another) and, for the time being, adding a manual keyword of “ui-focus”. In moving things, it’s also good to just be reviewing the issue the ticket raises and testing any patches provided, marking as needs-refresh if it doesn’t apply or closing the ticket (or making it with the close keyword) if it’s no longer relevant. There are almost 3500 tickets open right at this moment, which is an unmanageable number that leads to things getting lost. Let’s help get that down while we get Trac organized. Here’s the <a href="https://web.archive.org/web/20130302092326/https://core.trac.wordpress.org/query?status=accepted&status=assigned&status=new&status=reopened&status=reviewing&component=UI&group=milestone&col=id&col=summary&col=component&col=status&col=type&col=priority&col=milestone&order=priority">list of tickets in the UI component</a>, and the newer <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/query?status=accepted&status=assigned&status=new&status=reopened&status=reviewing&keywords=~ui-focus&group=milestone&order=priority">list of things tagged ui-focus</a>. If you’re not Trac-minded, don’t worry. If you are, we’d appreciate the help!</p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-816" class="commentlist inlinecomments"> </ul> </li> <li id="prologue-817" class="post-817 post type-post status-publish format-status hentry category-uncategorized"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )">lessbloat</a> <span class="meta"> <abbr title="2013-01-21T19:44:43Z">7:44 pm <em>on</em> January 21, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/21/i-thought-id-run-one-more-user-through/" class="thepermalink" title="Permalink">Permalink</a> </span> <span class="tags">   </span> </span> </h4> <div id="content-817" class="postcontent"> <p>I thought I’d run one more user through testing our current concept of having both a “manage” screen and a “add/edit” screen for menus. </p> <p>For this test I added a quick little JS hack to visually highlight the “Menus in your theme” meta box when a user clicks there from the “add/edit” screen success message. You’ll see in the video that my implementation is ugly as sin. <img src="https://web.archive.org/web/20130302092326im_/http://make.wordpress.org/ui/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"/> I just wanted to test the concept with the knowledge that if it worked, we could always improve the design.</p> <p>I also pulled the last step, which asked users to add a custom menu widget. While adding a custom menu widget is somewhat related, we likely won’t be addressing anything in widgets for this release.</p> <p>Here’s the video for <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC5-9.mp4">user 9</a> (in our series of menus user tests).</p> <p> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/21/i-thought-id-run-one-more-user-through/#more-817" class="more-link">(More …)</a></p> </div> <div class="discussion" style="display: none"> <p> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/e7d27dbfb0449f8f9d7e6a0bec38587c?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://theversatilitygroup.com/" rel="external nofollow" class="url">Diane Kinney</a>, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/08001a0a424aed1382375a446ed690d6?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://earthbound.com/" rel="external nofollow" class="url">adamsilverstein</a>, and <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/5fb183ebd78788e2fc89e7d5e1e64bc6?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://twitter.com/#!/JerrySarcastic" rel="external nofollow" class="url">Jerry Bates (JerrySarcastic)</a> are discussing. <a href="#" class="show-comments">Toggle Comments</a> </p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-817" class="commentlist inlinecomments"> <li id="comment-22607" class="comment byuser comment-author-jerrysarcastic even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/5fb183ebd78788e2fc89e7d5e1e64bc6?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://twitter.com/#!/JerrySarcastic" rel="external nofollow" class="url">Jerry Bates (JerrySarcastic)</a> <span class="meta"> <abbr title="2013-01-21T20:54:43Z">8:54 pm <em>on</em> January 21, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/21/i-thought-id-run-one-more-user-through/#comment-22607" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F21%2Fi-thought-id-run-one-more-user-through%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22607" class="commentcontent"><p>Great test, even if the cursor was a bit funky! I thought the feedback over audio was pretty informative as well.</p> <p>Having not seen all the videos in this series, how common is feedback like “I have no idea what I’m doing here, just following instructions” amongst subjects? This seems like a fundamental stumbling block that prevents users from getting to the right part of the dashboard in the first place.</p> </div> </li> <li id="comment-22608" class="comment byuser comment-author-adamsilverstein odd alt thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/08001a0a424aed1382375a446ed690d6?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://earthbound.com/" rel="external nofollow" class="url">adamsilverstein</a> <span class="meta"> <abbr title="2013-01-21T22:26:05Z">10:26 pm <em>on</em> January 21, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/21/i-thought-id-run-one-more-user-through/#comment-22608" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F21%2Fi-thought-id-run-one-more-user-through%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22608" class="commentcontent"><p>how about in the new menu and edit menu screens, we offer them the ability to assign the menu as the primary (or other menu), instead of adding an extra step. near the save button, “assign this menu to: [none, primary, footer, etc.]” that way you get to pick the spot the menu is going right from the beginning (or choose not too if using in a non standard location)</p> </div> </li> <li id="comment-22609" class="comment byuser comment-author-versatility even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/e7d27dbfb0449f8f9d7e6a0bec38587c?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://theversatilitygroup.com/" rel="external nofollow" class="url">Diane Kinney</a> <span class="meta"> <abbr title="2013-02-03T14:42:08Z">2:42 pm <em>on</em> February 3, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/21/i-thought-id-run-one-more-user-through/#comment-22609" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F21%2Fi-thought-id-run-one-more-user-through%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22609" class="commentcontent"><p>I’m not sure where the right spot is to offer up this thought – but my single biggest frustration with menus is that they are not integrated with pages. Most of the sites we build are not blogs, but sites with lots of pages structured into different menus. It would save a lot of effort if I could tick off add this page to Menu A or Menu B right from the page editing screen.</p> </div> </li> </ul> </li> <li id="prologue-812" class="post-812 post type-post status-publish format-status hentry category-uncategorized"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )" class="post-avatar"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=48&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"/> </a> <h4> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/author/lessbloat/" title="Posts by lessbloat ( @lessbloat )">lessbloat</a> <span class="meta"> <abbr title="2013-01-11T20:09:41Z">8:09 pm <em>on</em> January 11, 2013</abbr> <span class="actions"> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/" class="thepermalink" title="Permalink">Permalink</a> </span> <span class="tags">   </span> </span> </h4> <div id="content-812" class="postcontent"> <p>Here are the results from <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC5-7.mp4">user 7</a> (in our menus user testing series) & <a href="https://web.archive.org/web/20130302092326/http://wpusertesting.com/videos/DC5-8.mp4">user 8</a> both with the <a href="https://web.archive.org/web/20130302092326/http://core.trac.wordpress.org/attachment/ticket/23119/23119.17.diff">23119.17.diff patch</a> applied.</p> <p> <a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#more-812" class="more-link">(More …)</a></p> </div> <div class="discussion" style="display: none"> <p> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=16&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> lessbloat, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/fa71373c042cff6fd70365123ca1dd2e?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://www.molakki.com/" rel="external nofollow" class="url">kristofferR</a>, <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/5fb183ebd78788e2fc89e7d5e1e64bc6?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G" class="avatar avatar-16 photo" height="16" width="16"/> <a href="https://web.archive.org/web/20130302092326/http://twitter.com/#!/JerrySarcastic" rel="external nofollow" class="url">Jerry Bates (JerrySarcastic)</a>, and 2 others are discussing. <a href="#" class="show-comments">Toggle Comments</a> </p> </div> <div class="bottom-of-entry"> </div> <ul id="comments-812" class="commentlist inlinecomments"> <li id="comment-22597" class="comment byuser comment-author-jkudish even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/8fac9a834778de5a3b7b26fb28cff956?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://profiles.wordpress.org/users/jkudish/" rel="external nofollow" class="url">Joey Kudish</a> <span class="meta"> <abbr title="2013-01-11T20:20:11Z">8:20 pm <em>on</em> January 11, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22597" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22597" class="commentcontent"><p>Sweet! this is looking good!</p> </div> </li> <li id="comment-22598" class="comment byuser comment-author-drewapicture odd alt thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/95c934fa2c3362794bf62ff8c59ada08?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.werdswords.com/" rel="external nofollow" class="url">Drew Jaynes (DrewAPicture)</a> <span class="meta"> <abbr title="2013-01-11T20:23:30Z">8:23 pm <em>on</em> January 11, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22598" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22598" class="commentcontent"><p>User testing is so awesome. Maybe we should get more general with the link in the updated notice. “Manage your site’s menus” or something.</p> </div> <ul class="children"> <li id="comment-22599" class="comment byuser comment-author-drewapicture even depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/95c934fa2c3362794bf62ff8c59ada08?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.werdswords.com/" rel="external nofollow" class="url">Drew Jaynes (DrewAPicture)</a> <span class="meta"> <abbr title="2013-01-11T20:31:26Z">8:31 pm <em>on</em> January 11, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22599" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22599" class="commentcontent"><p>After watching #7, maybe change it to:</p> <p><strong>Main Menu</strong> has been updated. <a href="#" rel="nofollow">Assign a theme location for this menu</a>, or <a href="#" rel="nofollow">use it in a widget</a>.</p> <p>It also occurs to me maybe we should have a “Manage your widget menus” link somewhere on or around the theme location metabox. Thoughts?</p> </div> <ul class="children"> <li id="comment-22600" class="comment byuser comment-author-lessbloat odd alt depth-3"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-01-11T20:35:45Z">8:35 pm <em>on</em> January 11, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22600" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22600" class="commentcontent"><p>Copy change: Nice. I like it.</p> <p>Widget menus link: Not sure, I think I’d have to see it.</p> </div> </li> </ul> </li> </ul> </li> <li id="comment-22601" class="comment byuser comment-author-jerrysarcastic even thread-even depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/5fb183ebd78788e2fc89e7d5e1e64bc6?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://twitter.com/#!/JerrySarcastic" rel="external nofollow" class="url">Jerry Bates (JerrySarcastic)</a> <span class="meta"> <abbr title="2013-01-11T21:22:18Z">9:22 pm <em>on</em> January 11, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22601" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22601" class="commentcontent"><p>I notice that User 7 did not correctly set the Custom Menu Widget to the Sites I Love menu. She left it set to Main Menu, which is filled by default instead… Maybe it would be better to have the Widget show a list with checkboxes (of the available menus) with none of them checked by default? Seems like an easy way to avoid that mistake.</p> <p>Perhaps if the Custom Menu widget was similar to the Categories metabox on the Add Menu screen? I.E. has a list with checkboxes for the menus, plus tabs at top for Recent, View All, and Search. That would add some parity between creating a menu, and configuring the Custom Menu widget.</p> </div> <ul class="children"> <li id="comment-22604" class="comment byuser comment-author-lessbloat odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-01-21T16:02:03Z">4:02 pm <em>on</em> January 21, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22604" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22604" class="commentcontent"><p>These are all good thoughts. Let’s make sure we address them when we tackle the widgets page UX.</p> </div> </li> </ul> </li> <li id="comment-22603" class="comment byuser comment-author-kristofferr even thread-odd thread-alt depth-1"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://1.gravatar.com/avatar/fa71373c042cff6fd70365123ca1dd2e?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> <a href="https://web.archive.org/web/20130302092326/http://www.molakki.com/" rel="external nofollow" class="url">kristofferR</a> <span class="meta"> <abbr title="2013-01-15T21:25:44Z">9:25 pm <em>on</em> January 15, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22603" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22603" class="commentcontent"><p>User 7 got confused at task 7, around 3:30, and did not manage to actually set the menu titled “Main menu” as the primary menu of the site. Some part of the issue may simply be because the name of the menu was confusing (“Main” and “Primary” are synonyms after all, no wonder she though the Main menu was the Primary menu), but I also think it was because the “Manage Menus” screen doesn’t provide adequate instructions like the other screens does. </p> <p>While the user previously was guided through the process of creating a menu with clear instructions positioned roughly the same place on the screen (top of main box on the right), after clicking the “replace your sites main navigation” link she was redirected to another page where other elements, mainly the table list of the available menus, are much more noticeable than the action she actually wants to take, which is setting the primary menu. The user shouldn’t have </p> <p>There could be solved in a few different ways.<br/> 1. Add a sentence or two of explaining text in a yellow box<br/> 2. Make the “Menus within your theme” box larger and more noticeable<br/> 3. Grey out the table until a primary menu is set if the user came from clicking the “replace your sites main navigation” link.</p> <p>I think a combination of 1 and 3 would be best. Here’s a really quick mockup of what something like that could look like: <a href="https://web.archive.org/web/20130302092326/http://molakki.com/files/wp-menu-1.png" rel="nofollow">http://molakki.com/files/wp-menu-1.png</a></p> <p>As a side note not really related to the menu UI changes we’re talking about here directly, but still seen in the user testing videos is how confusing the experience of saving widgets are. The user receives no feedback at all that the widget has been saved except for a spinning circle for half a second. It should instead be similar to how the experience is saving new changes in the customizer, like this:<br/> <a href="https://web.archive.org/web/20130302092326/http://molakki.com/files/saving-widgets.mp4" rel="nofollow">http://molakki.com/files/saving-widgets.mp4</a></p> </div> <ul class="children"> <li id="comment-22605" class="comment byuser comment-author-lessbloat odd alt depth-2"> <img alt="" src="https://web.archive.org/web/20130302092326im_/http://0.gravatar.com/avatar/4c5da16f1f65bd9824bc30cb1cc62e8f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32"/> <h4> lessbloat <span class="meta"> <abbr title="2013-01-21T16:04:46Z">4:04 pm <em>on</em> January 21, 2013</abbr> <span class="actions"> <a class="thepermalink" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/2013/01/11/here-are-the-results-from-user-7-in/#comment-22605" title="Permalink">Permalink</a> | <a rel="nofollow" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fui%2F2013%2F01%2F11%2Fhere-are-the-results-from-user-7-in%2F">Log in to Reply</a> </span> </span> </h4> <div id="commentcontent-22605" class="commentcontent"><p>RE: Main menu – I’d like to try and move that to “Screen Options” and see what comes of it.</p> <p>RE: Widgets: – I agree, when we tackle widgets, let’s make sure we address this.</p> </div> </li> </ul> </li> </ul> </li> </ul> <div class="navigation"> <p class="nav-older"><a href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/page/2/">← Older posts</a></p> <p class="nav-newer"></p> </div> </div>  </div>  <div class="clear"></div> </div>  <div id="notify"></div> <div id="help"> <dl class="directions"> <dt>c</dt><dd>compose new post</dd> <dt>j</dt><dd>next post/next comment</dd> <dt>k</dt> <dd>previous post/previous comment</dd> <dt>r</dt> <dd>reply</dd> <dt>e</dt> <dd>edit</dd> <dt>o</dt> <dd>show/hide comments</dd> <dt>t</dt> <dd>go to top</dd> <dt>l</dt> <dd>go to login</dd> <dt>h</dt> <dd>show/hide help</dd> <dt>shift + esc</dt> <dd>cancel</dd> </dl> </div> <div id="footer"> <div class="wrapper"> <p> <a href="https://web.archive.org/web/20130302092326/http://wordpress.org/about/privacy/">Privacy</a> | <a href="https://web.archive.org/web/20130302092326/http://wordpress.org/about/license/">License / GPLv2</a>     See also: <a href="https://web.archive.org/web/20130302092326/http://wordpress.com/?ref=wporg-footer" title="Hassle-free WP hosting">Hosted WordPress.com</a> | <a href="https://web.archive.org/web/20130302092326/http://wordpress.tv/" title="Videos, tutorials, WordCamps">WordPress.TV Videos</a> | <a href="https://web.archive.org/web/20130302092326/http://central.wordcamp.org/" title="Find a WordPress event near your home">WordCamp Events</a> | <a href="https://web.archive.org/web/20130302092326/http://buddypress.org/" title="A set of plugins to transform your WordPress into a social network">BuddyPress Social Layer</a> | <a href="https://web.archive.org/web/20130302092326/http://bbpress.org/" title="Fast, slick forums built on WordPress">bbPress Forums</a> | <a href="https://web.archive.org/web/20130302092326/http://jobs.wordpress.net/" title="Find or post WordPress jobs">WP Jobs</a> | <a href="https://web.archive.org/web/20130302092326/http://ma.tt/" title="Co-founder of WordPress, an example of what WordPress can do">Matt</a> </p> <br/> <iframe src="https://web.archive.org/web/20130302092326if_/http://www.facebook.com/plugins/like.php?app_id=121415197926116&href=http%3A%2F%2Fwww.facebook.com%2Fwordpress&send=false&layout=button_count&width=150&show_faces=false&action=like&colorscheme=light&font=lucida+grande&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowtransparency="true"></iframe>  <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://web.archive.org/web/20130302092326if_/http://platform.twitter.com/widgets/follow_button.html?screen_name=WordPress&show_count=false" style="width:150px; height:20px;"></iframe> <h6>Code is Poetry</h6> </div> </div> <script type="text/javascript">_qoptions={qacct:"p-18-mFEk4J448M"};</script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://edge.quantserve.com/quant.js"></script> <noscript><img src="https://web.archive.org/web/20130302092326im_/http://pixel.quantserve.com/pixel/p-18-mFEk4J448M.gif" style="display: none;" border="0" height="1" width="1" alt=""/></noscript>  <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://s.gravatar.com/js/gprofiles.js"></script> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://web.archive.org/web/20130302092326/https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <script type="text/javascript"> (function($){ $(document).ready(function() { $('#footer a').click(function() { if (this.href.indexOf('wordpress.org') == -1 && this.href.indexOf('http') == 0) { recordOutboundLink(this, 'Outbound Links', this.href); return false; } }); }); })(jQuery); </script> </body> </html> <div style="display:none"> <div class="grofile-hash-map-767fc9c115a1b989744c755db47feb60"> </div> <div class="grofile-hash-map-4c5da16f1f65bd9824bc30cb1cc62e8f"> </div> <div class="grofile-hash-map-1772cd53f2747f71c8455ac820606afc"> </div> <div class="grofile-hash-map-f27b79eb04eb414c4c1fc98375fe7404"> </div> <div class="grofile-hash-map-7807de154b3638fa7bdd6231bec43283"> </div> <div class="grofile-hash-map-86debe7ed7ece0f968097a768dcbd5cb"> </div> <div class="grofile-hash-map-6506162ada6b700b151ad8a187f65842"> </div> <div class="grofile-hash-map-e2b3d4b90ac2ae4e7d5ca13e8ea04f19"> </div> <div class="grofile-hash-map-2dc245d4cf9e5579dfb0e13e7dcb75db"> </div> <div class="grofile-hash-map-4c5da16f1f65bd9824bc30cb1cc62e8f"> </div> <div class="grofile-hash-map-9e2ff0c5b6051afc8e186aacd9026e98"> </div> <div class="grofile-hash-map-848f029cb21bb7aef88d2088e036794b"> </div> <div class="grofile-hash-map-abfd4ff9c24957f1a9f0435e23de1f73"> </div> <div class="grofile-hash-map-1299e8d336a2d5faa4fc440d07ea44f8"> </div> <div class="grofile-hash-map-32b34f5d4fdde3f24996bc8c5ec38f10"> </div> <div class="grofile-hash-map-26ab8f9b2c86b10e7968b882403b3bf8"> </div> <div class="grofile-hash-map-ff299663d207de252a1726fef950d24f"> </div> <div class="grofile-hash-map-767fc9c115a1b989744c755db47feb60"> </div> <div class="grofile-hash-map-6506162ada6b700b151ad8a187f65842"> </div> <div class="grofile-hash-map-99ab7c018336a3263f8f78bedc2d6500"> </div> <div class="grofile-hash-map-aea664c9693244fe9564c205034ef7e0"> </div> <div class="grofile-hash-map-bf2b361113b9b05772066ff2924e9245"> </div> <div class="grofile-hash-map-fae451be6708241627983570a1a1817a"> </div> <div class="grofile-hash-map-0d9561ad86e233e23263cbbeaeb418cc"> </div> <div class="grofile-hash-map-53f7e24dd4f84b7d83e14d176ee91b0a"> </div> <div class="grofile-hash-map-8fac9a834778de5a3b7b26fb28cff956"> </div> <div class="grofile-hash-map-2801f5145de98010dd72f1ac6d92938f"> </div> <div class="grofile-hash-map-e7d27dbfb0449f8f9d7e6a0bec38587c"> </div> <div class="grofile-hash-map-08001a0a424aed1382375a446ed690d6"> </div> <div class="grofile-hash-map-5fb183ebd78788e2fc89e7d5e1e64bc6"> </div> <div class="grofile-hash-map-fa71373c042cff6fd70365123ca1dd2e"> </div> <div class="grofile-hash-map-95c934fa2c3362794bf62ff8c59ada08"> </div> </div> <script type="text/javascript"> /* <![CDATA[ */ jQuery( document ).ready( function( $ ) { function hideComments() { $('.commentlist').hide(); $('.discussion').show(); } function showComments() { $('.commentlist').show(); $('.discussion').hide(); } $( "#togglecomments" ).click( function() { if ( $( '.commentlist' ).css( 'display' ) == 'none' ) { showComments(); } else { hideComments(); } return false; }); }); /* ]]> */ </script><script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-includes/js/admin-bar.min.js?ver=3.6-alpha-23495"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201309"></script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://s.gravatar.com/js/gprofiles.js?ver=2013Maraa"></script> <script type="text/javascript"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type="text/javascript" src="https://web.archive.org/web/20130302092326js_/http://make.wordpress.org/ui/wp-content/plugins/jetpack/modules/wpgroho.js?ver=3.6-alpha-23495"></script> <script src="https://web.archive.org/web/20130302092326js_/http://stats.wordpress.com/e-201309.js" type="text/javascript"></script> <script type="text/javascript"> st_go({v:'ext',j:'1:2.0.2',blog:'31759332',post:'0'}); var load_cmc = function(){linktracker_init(31759332,0,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <div id="wpadminbar" class="nojq nojs" role="navigation"> <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a> <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0"> <ul id="wp-admin-bar-root-default" class="ab-top-menu"> <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu"> <li id="wp-admin-bar-wporg"><a class="ab-item" href="https://web.archive.org/web/20130302092326/http://wordpress.org/">WordPress.org</a> </li> <li id="wp-admin-bar-documentation"><a class="ab-item" href="https://web.archive.org/web/20130302092326/http://codex.wordpress.org/">Documentation</a> </li> <li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://web.archive.org/web/20130302092326/http://wordpress.org/support/">Support Forums</a> </li> <li id="wp-admin-bar-feedback"><a class="ab-item" href="https://web.archive.org/web/20130302092326/http://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu"> <li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150"/><input type="submit" class="adminbar-button" value="Search"/></form></div> </li> <li id="wp-admin-bar-log-in"><a class="ab-item" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php">Log In</a> </li></ul> </div> <a class="screen-reader-shortcut" href="https://web.archive.org/web/20130302092326/http://make.wordpress.org/ui/wp-login.php?action=logout&_wpnonce=b615af3f6d">Log Out</a> </div> </body> </html>