Now that we’ve got a couple of rough…

Now that we’ve got a couple of rough patches (welcome screen, color picker, “view” my site) it’s time go back and test a few users in our first discovery cycle with these patches applied, and see if we’ve made any progress.

Here’s the video, and here are my notes:

Step two notes – Log in

No problems.

Step two notes – Explain what you see

No problems.

Step Three notes – Preview your blog

  • 4:00 – She’s looking for a link
  • 4:14 – “Oh here it is” – She clicks “Visit my blog” in toolbar (Win for “view” my site patch).

Step Four notes – Change your background color

  • 5:45 – When asked to change the background color, she immediately (instinctively) clicked the big blue “customize my site” button (woot!).
  • 5:55 – she easily found the BG color option in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings..
  • 6:00 – Oh noooes, she found a bug in Iris (so painful to watch…)! clicking the right column of Iris does’t change the color in the text-field (After a bit of testing, it looks like if you click the right column first, before clicking the left gradient box, nothing happens. If you click, if you click the left box first, then the right column, it works as expected.) cc// @mattwiebe
  • 8:07 – “Each time I view my blog it gives me a slightly different picture”.
  • 9:10 – still trying to figure out why BG color isn’t changing – “I’m so confused”
  • 10:30 – Moved on without being able to figure out how to change BG color. 🙁

Step Five notes – Change your site title

  • 10:50 – Looking in Appearance -> HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. for a place to change her site title (which really makes sense, we need to add a link there).
  • 11:10 – didn’t find it in Appearance -> Header, no she’s checking all up and down the left nav
  • 12:20 – Found it in the customizer
  • 12:30 – What the? She couldn’t add spaces? That is weird. There is a bug in one of the patches? cc// koopersmith can you spot any reason why this would be happening in one of the patches listed above?
  • 13:20 – “I’m very confused – I don’t know how I would insert spaces”
  • 14:22 – gave up without being able to add spaces…

Step Six notes – Add your first post

No problems.

Step Seven notes – Preview your new post

No problems.

Step Eight notes – Publish an image

She found how to upload the image – not going to worry about anything after that for now, since media manager is being revamped. We’ll do plenty of user testing on the new media manager once it’s complete.


  • Bug in Iris prevented her from changing her background color
  • Can we please NOT have rotating header images in twenty twelve? None of the users we’ve tested have really comprehended what’s going on there.
  • We really should add a link on “Appearance -> Header” to “Settings -> General” to change their site title or tagline.
  • There was a bug in the customizer when she tried to update her site title which wouldn’t allow her to add spaces.

I’d like to get the color picker bug fixed before I run another user through these changes, but overall, I’d say these patches have already really improved things for first-time users. Thoughts?

#discovery-cycle-1, #user-testing

Ticket scrub notes for 8 21 Patches needed…

Ticket scrub notes for 8/21

Patches needed

Status update

Meeting summary for 8/14

Note: meeting on 8/7 did not really happen, as many were traveling or otherwise out of commission post-WCSF.

Meeting was largely focused on status check of various items and really bearing down on assignments and breaking down tasks into what can be realistically accomplished within a given time period (the next week) so we can regularly check in. Setting the goal is not the maximum that can be achieved – only the minimum. Things finished early or with aplomb are highly encouraged 🙂

  • Welcome screen/panel refinements are still chugging along after @lessbloat‘s paternity leave (CONGRATS). Latest iteration at Discussed possibly having different paths based on whether or not a static front pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a “static front page” which is used to show customized content. Typically this is the first page you see when you visit a site url, like for example. is assigned. @lessbloat, @melchoyce, and @chexee are looking at the UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it./language side. @sabreuse and @georgestephanis are on the dev side. Would like UX/language nailed down before next meeting and rough patch started. Testing can start anytime there’s something testable. Dev-wise, all hook-ability issues should be addressed this go-round. Tickets: #21368, #21331
  • Color picker. @mattwiebe and Devin Price worked on this at WCSF dev day, going with integrating Automattic’s open source Iris color picker, and will continue to work together toward a patch. @mattwiebe worked with us directly on some UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing./UX picking and will continue to refine. Designers welcome to take a look and give feedback as well. @koopersmith is on JS consult. We should be able to knock out the consistency issue while we’re at it. Would like to see basic implementation in at least one place (settings screen or customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. – both are needed for final product) by next week. Tickets: #21206 and #19616
  • Cookies are on offer for a solid patch on #16379. There are some finer details that need consideration, such as editing screens and title + slug. More details in the IRC log:
  • @tddewey put up a nice big patch for the remainder of the admin UI images needing HiDPI treatment on #21019. Leaving this to @azaozz for review and dropping in, now that gradients are in and extraneous images have been deleted.
  • I (@helenyhou) am on #21391 as my singular dev task – using the post edit screen for attachment editing, and any CPT support and edit screen enhancements that come with. It is quite full of rabbit holes. Would love a dev partner or two (or more) on this – have some leads now thanks to dev chat.
  • Media. @koopersmith is working on making those lovely wireframes a reality. @azaozz working on preview in the editor: #21585
  • Bonus item: UI/UX guidelines for plugins and themes. Discussion stemming from, with a rough potential document started by @melchoyce at Would just like to see how this might pan out in terms of a publishable document. Will be leaving my own comments over on Smashing Mag.

Reminder: devs should ideally be focused on one large item at any given moment. Working on your own pet projects and roaming around is always fine, but would prefer to stay away from overcommitment, especially for point people. This includes me 🙂


We did some brainstorming at Dev Day today…

We did some brainstorming at Dev Day today around improving the Help and Screen Options tabs in the admin. Keep in mind nothing here is a final decision, just some exploration of what we thought would be easy wins to make these tabs more useful.

Here are the problems with them right now:

  • Most users are blind to these tabs.
  • The labels and positioning give little indication as to what these tabs actually do.
  • For a lot of users, Help is not that helpful.
  • They’re position in the admin creates yet another point of navigation for users to be aware of (and per #1, most of them aren’t).
  • The very wide container for text makes a lot of the help text difficult to read.

Here are some of the possibilities we brainstormed (see notes below image):


  • Adding icons to these tabs would (hopefully) both make these tabs more visible and give a better indication as to what these tabs too.
  • Moving these to the right side of the toolbar would give even more context to what these do, as they would be grouped with other user-specific settings.
  • (6) The toolbar dropdown would allow for a slimmer content area for better readability.
  • (7) The slimmer content area would let us make screen options read like a list for better scannability.
  • (4/5) Putting the gear on the upper right would standardise with several other web apps (Twitter, etc).

We discussed possible changes to the labels:

  • Screen Options -> Screen Preferences
  • Help -> Screen Help
  • (3) Removing the Screen Options label altogether and only showing the icon (since the gear icon is so universally recognised). Possible expanding this to Help.

I did a hi-fi mockup of what the new Help dropdown might look like:

#help, #screen-options

Meeting summary for 7/31


  • Media wireframes: look at them if you haven’t yet, and leave feedback. Development breakdowns and work will happen in #wordpress-dev when we get there, for the development-minded. WCSF dev day will also be a forum for more discussion for those who are there, and we will be vigilant about sharing those conversations publicly. Tickets to keep an eye on: #21390 and #21391
  • AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( is still a big need in terms of expertise and hands on deck, and there are plenty of tasks with UI implications. Discuss on the post if you’re interested or have knowledge when it comes to making things accessible on the web (screenreaders and non-mouse users, for instance) or hit up @sabreuse, who is helping shepherd efforts. Also keep an eye on Make Accessibility.
  • Welcome screen v2 is also still in wireframe and copy feedback stage. We need to drop the Spotlight/Alfred/Quicksilver search thing in terms of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development this cycle (sorry, we know how cool it is) and focus on iterating on the panel that is there. We also need go back to focusing on new user experience (NUX) and initial walkthroughs/links for now. The ideas have been great, and are not being thrown away by any means – we just need to focus so that we can actually get something done in time. Who knows, if we move fast, and get user testing rolling, we might be able to look at more iterations (and toss in a hook to make a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party for the Spotlight thing possible) 🙂

And finally, a reminder that open office hours are every weekday at 19:00 UTC (3PM EDT). #wordpress-ui is always open for discussions, but if you’re a little more nervous about just poking your head in or want to schedule something with a group, it’s a great time to do just that!


How to Develop for HiDPI (“Retina”) without a Retina MacBook Pro

We’re working on HiDPI (“Retina”) support for WordPress. Of course, most people don’t have a Retina MacBook Pro at their disposal. So here’s how OS X-using WordPress developers can do HiDPI development without dropping $3,000 US on a laptop.

What you need

  • OS X 10.8 Mountain Lion
  • A monitor, with a resolution of at least 2048×1536 (probably just 27- and 30-inch monitors)
  • An Apple developer account

Steps to enable HiDPI mode

  1. Click here and log in with your Apple developer account.
  2. Find “Graphics Tools for Xcode” (the latest version offered) and download the DMG.
  3. When the DMG opens, drag the contents somewhere (I put them in /Applications/Xcode Tools/).
  4. Launch the “Quartz Debug” app (this is the only one you need, so you can get rid of the other ones if you like).
  5. Press ⌘2 or go to Window > UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. Resolution.
  6. Check the “Enable HiDPI display modes” checkbox.
  7. Log out of OS X (⇧⌘Q), then log back in.
  8. Pull up your Displays preferences pane ( > System Preferences > Displays).
  9. Check the “Scaled” radio button.
  10. Look for the highest resolution mode listed that says “(HiDPI)” after it, and select that.
  11. Lean way, way, way back in your chair and apply a saline solution to your eyeballs.

You can now use Safari 6+ or Chrome 21+ to view your WordPress development siteDevelopment Site You can keep a copy of your live site in a separate environment. Maintaining a development site is a good practice that can let you make any changes and test them without affecting the live/production environment. and do HiDPI development. Note that while you can do this with lower resolution screens, I’m not sure I’d recommend it — it’d be very cramped.

#development, #hidpi, #retina

Media Wireframes

Over the past week or so, I’ve worked closely with @lessbloat (Dave), @nacin, and @markjaquith to create a set of media workflows that will hopefully serve as a foundation and guide for the improvements in this release. (This is the fifth version of these wireframes — you can see the first four on Dave’s site.)

The usual disclaimers: None of this is final. These are wireframes, so please focus your feedback on the experience, not the aesthetics. As for scope, we are focusing our changes on improving the modal experience. This focuses on the overall picture; not all of this will necessarily make it into the final release.

So, without further ado…

Wireframes and workflows — fullscreen recommended.

The media library.

The media library, while uploading three files.

The attachment details screen.

Relevant TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub. tickets: #21390, #21391.

#3-5, #media

Accessibility tickets with UI implications

There are a number of recent tickets about accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( improvements in the admin, several of which raise questions that relate directly to the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. group. In particular:

#21283 Keyboard focus in the theme customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. should be on left options panel

#21310 Need skip link(s) at top of admin pages

#21312 How to log out of WordPress without a mouse?

#21324 Visible Focus within Admin Screens could be much clearer

#21326 Screen Options in Admin – Accessibility Enhancement

#21334 Accessibility of Quick Edit panel in Posts/Pages/etc

Please check them out and comment in-ticket with any feedback you may have; the same goes for any of the open tickets in the Accessibility component. Also, there are some tickets in the most recent batch that should be fairly easy for people who are just learning how to contribute. As always, you can ask here or in #wordpress-ui or #wordpress-dev any time if you need help with the whole process of working with tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub. and trunk, applying and building patches, and the like.

In general, we want to be keeping accessibility in mind with all UI work and working closely with the accessibility group. Major thanks to everyone who has been stepping up and raising these issues lately!

Welcome screen design v2

I’d like to get the ball rolling on the new welcome screen redesign for 3.5. I started playing around with a few ideas and I’d love to hear your thoughts:

My hope for this screen is that it will serve as a proper “home” that users can come back to again and again to find anything they need in the admin. As I mentioned here, this was a big stumbling blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. for each of the users we tested.

A couple of notes:

  • All of the copy and links are super generic, and need work.
  • You’ll notice the addition of tabs to the dashboard. My thought was that new users would be taken to this “Welcome” tab just after install. If they clicked the “dashboard” tab, we’d save that to the DB via AJAX, and on refresh, you’d still be on the dashboard tab.
  • On the right you’ll see the “viewing” drop down. My hope is to make the entire welcome tab extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software., so that you could add your own custom screen (set of links, and quick links) as an option. This dropdown would only show if you’ve added your own welcome screen option.
  • You of course should be able to easily hide the “welcome” tab (if you wish) through a hook. As well as having hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. anywhere else they make sense.
  • The “What are you trying to do” text box should suggest links as you type – similar to the idea here. I will note that while there are 1000 things that we could add to this auto-suggest dropdown, I’d prefer to just focus on adding links to functionality within the admin for the 3.5 release (and really making that experience solid).
  • The “Quick links” bar would be links to the most used sections of the admin (for new users). I was hoping we could find a nice library of open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. vector icons to use there.

Here’s the balsamiq source file if you’ve got some ideas based on this wireframe:

This is all still very rough, and I expect that we’ll go through a couple rounds of iteration before we get it right. Thoughts?

#21019 – Retina All the Things

The current goal is to HiDPI/2x current assets, whether that’s through making new versions of various images/icons or converting to CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. solutions (pretty much gradients and perhaps comment bubbles). Longer-term we may end up using other solutions, but for the moment let’s focus on the task at hand.

I’ve left a long comment about things I’m seeing as still needed. No need to know how to do the CSS patching – a dev can jump in and do that part if you’re more comfortable with the graphics side. What we need is people helping out with creating 2x versions of things, sometimes in various colors. We may need to coordinate with @empireoflight (Ben) to make sure there’s no duplicate effort.

You’ll want to be uploading files to TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub. for the most part – if you want to have somebody take a look first, feel free to post a comment here or talk about it in IRC (office hours are a great time for that). Note that uploading files to Trac does not trigger an email notification, so you’ll want to leave a comment noting what you’ve added so it’s not overlooked. Again, feel free to ask questions here or in IRC if you’re not sure what to do and we’ll try to get you sorted!

#3-5, #css, #design, #trac-tickets