I sent a user through the new page…

I sent a user through the new page on front flow, as well as a few steps 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. (including the new color picker). I sort of cheated on this one by telling him exactly where to click at times, but the purpose of this test was not to test if he could get there, but once he got there if the changes we’ve made make sense.

Here’s the video, and my notes:

Step One notes – Log in

No problems.

Step Two notes – Add 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 wordpress.org for example.

No problems.

Step Three notes – Preview your blog

2:19 – “So people can leave a comment on my homepage?” (see my note below)

Step Four notes – Go to customizer

No problems.

Step Five notes – Change your tagline

No problems.

Step Six notes – Change your background color

4:23 – Unfortunately, the new color picker failed again, even with the new “current color” tooltip. User simply clicked the right hue selector, and assumed that the color had been changed to blue.
5:55 – “Ah, I have to drag this, oh. Well that was a little bit confusing”, as he goes back to the customizer color selector and discovers that he has to move the puck in the left-side box.

Step Seven notes – Edit your home page

7:31 – Makes it to the home page to edit it, but then says, “Alright I’m confused”.
8:30 – Goes back to dashboard, “How come this doesn’t look the same as what I was just messing around with”, referring to the customizer.
9:09 – He’s getting confused from my instructions, I said “Change the title” but he’s thinking about the site title, which he saw in the customizer. I’ll have to fix my wording here.

Recap

  • He pointed out that comments are turned on for his static home page. Should we consider turning comments off by default when a static home page is enabled?
  • Having to click twice to select a color is still confusing.
  • Having the static auto-generated “home” page be blank might be a bit confusing. Perhaps we could pre-fill the page description with a bit of helper text. Something like, “This is your new default home page, you can edit the content of this page via the pages section of your dashboard.”.

Ticket scrub notes 8 29 Needs patch Customizer…

Ticket scrub notes 8/29

Needs patch

  • Customizer accessibility – https://core.trac.wordpress.org/ticket/21283
  • Retina theme screenshots – https://core.trac.wordpress.org/ticket/21388
  • meta boxes on edit comment – https://core.trac.wordpress.org/ticket/21499 – Based on Nacin’s comment
  • Current theme path – https://core.trac.wordpress.org/ticket/17944

Ready to commit

  • Search behavior with filters – https://core.trac.wordpress.org/ticket/19452
  • Font size in network admin – https://core.trac.wordpress.org/ticket/21223
  • Updated theme activated message – https://core.trac.wordpress.org/ticket/19787
  • Thickbox title font – https://core.trac.wordpress.org/ticket/20268
  • Hide upload button – https://core.trac.wordpress.org/ticket/20855
  • Labels in options-discussions.php – https://core.trac.wordpress.org/ticket/21373
  • misaligned delete permanently – https://core.trac.wordpress.org/ticket/21196
  • Widget titles cropped – https://core.trac.wordpress.org/ticket/20887
  • Toolbar search icon – https://core.trac.wordpress.org/ticket/20033
  • Sample permalink clickable – https://core.trac.wordpress.org/ticket/18306

Has owner, needs patch

  • Welcome screen hooks – https://core.trac.wordpress.org/ticket/21368 – @ryelle will take a stab at this
  • Updated buttons – https://core.trac.wordpress.org/ticket/21598 – @helenyhou is going to work on a update
  • Retina – https://core.trac.wordpress.org/ticket/21019 – Needs unified patch, assigned to @azaozz
  • Page on front – https://core.trac.wordpress.org/ticket/16379 – @sergeybiryukov working on updated patch
  • Customizer JS errors in IE – https://core.trac.wordpress.org/ticket/21707 – Assigned to @koopersmith
  • Color picker – https://core.trac.wordpress.org/ticket/21206 – @mattwiebe is looking into one last issue
  • Screen options in toolbar – https://core.trac.wordpress.org/ticket/21583 – @melchoyce just uploaded patch
  • TinyMCE status bar – https://core.trac.wordpress.org/ticket/21605 – @azaozz is on it
  • TinyMCE button styles – core.trac.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//ticket/18141 – @lessbloat is taking a shot at this
  • JS spinner – https://core.trac.wordpress.org/ticket/21456 – @kevinconboy is on this one
  • Prefix “visit” in admin – https://core.trac.wordpress.org/ticket/21354 – @lessbloat will test couple options

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 https://make.wordpress.org/ui/2012/07/24/welcome-screen-design-v2/#comment-22349. 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 wordpress.org 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: https://irclogs.wordpress.org/chanlog.php?channel=wordpress-ui&day=2012-08-14&sort=asc#m51505
  • @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 http://wp.smashingmagazine.com/2012/08/08/help-us-help-wordpress/, with a rough potential document started by @melchoyce at https://docs.google.com/document/d/1ZWPeUSFVYlMxClmHFjuAXuekXcZsLso49G3bDRquHcs/edit. 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 🙂

#meeting-summary

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.https://core.trac.wordpress.org/. tickets: #21390, #21391.

#3-5, #media

Since 3.5 hasn’t officially started yet I thought…

Since 3.5 hasn’t officially started yet, I thought I’d play around with a quick proof of concept for the “Spotlight” search functionality this morning. Here’s what I’ve got so far:

There are still heaps of rough spots.

Here’s the plugin if you’re interested in taking it for a spin: http://cl.ly/0E3G2Y1J33372C3f3W3Q

Let me know if you think this is worth pursuing (even just as 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 WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party).

Meeting Summary, 7/3

What we talked about today:

  • Briefly touched on @lessbloat‘s post about an advisory group. We should discuss that more right there in the comments of that post, especially if you are linking to resources. Basic consensus is that it’s a great idea.
  • The things we’ve observed and learned from the three user tests that have been done so far. @lessbloat is also going to run some tests focusing on the CMS-type tasks. We discussed low hanging fruit as well as bigger things we can approach, whether for 3.5 or 3.6. More details on those will come in follow up two separate discussion posts. We need to be disciplined about being data-informed rather than data-driven (especially in these small sample numbers), the prioritization of tasks, and being realistic about effort levels and commitments.
  • Pre-flight checklists for things that should always have eyes on them before a release, or rather, before a cycle nears betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.. This includes things like the about page and welcome panel as well as process lists for things like patch review/testing. Ideally we’d formalize a few of these. As @jane said, checklists save lives, really!
  • A very quick discussion about the process of 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. in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., from design-y side things like graphics and mockups to turning them into TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets and code/plugins/patches. We need to get back to the way things were/supposed to be and dig up an old post on the process. Briefly, this means that design iterations can happen right here on Make UI rather than Trac, as Trac can be intimidating for some folks and often does devolve into linear discussions about details and code. As a team repTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts., I (@helenyhou) will be happy to summarize for #wordpress-dev chats or on Trac as crucial points are hit. For those who aren’t as comfortable with code and/or SVNSVN Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation. Its goal is to be a mostly compatible successor to the widely used Concurrent Versions System (CVS). WordPress core and the wordpress.org released code are all centrally managed through SVN. https://subversion.apache.org/., we should buddy up in pairs or small teams and work together to get working code and then turn that into a patch. For example, a design and front-end type can work with a dev proficient with SVN to get their idea turned into a nice clean patch, or a design-type can work with a dev who’s still learning about contributing along with a seasoned contributor. Again, I’ll facilitate folks getting set up to work together as needed, but since we’re all very friendly, there’s a good chance it’ll happen naturally. There are also going to be clearer paths for discussion and review.

I would like to note here that we encourage plugins for proposals that involve UI changes because not all people (or realistically, the minority of people) know how to apply a patch or have an environment in which to do so. 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 WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, whether or not it’s actually in the .org repo, is a better way to get non-coding types to have a go at testing. I think this is sometimes not well communicated or understood and can come across as a brush-off, so I thought I would write it out here again.

Things to do:

  • Discussion posts here on Make UI – coming shortly. These are going to function sort of as writing prompts.
  • Yet another survey post about contributors so we can have a reference point for teaming up.
  • We should write up some documents like “Getting Started with Contributing to the UI Group”, guidelines for things like QA/testing, RTL, and 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). (https://en.wikipedia.org/wiki/Accessibility), and some of those checklists mentioned above. Remember that we strongly encourage iteration 🙂

#meeting-summary, #summary

Proposed agenda for 7/3

Note: I do know that it’s holiday time in the US. However, I think it would be best to have this discussion this week rather than next week on the day before the dev chat so we have some time to absorb and think thoroughly.

In anticipation of the dev chat for 3.5 scoping on July 11, let’s take some time to discuss the findings of the user testing @lessbloat so wonderfully ran and then see what that means in terms of things we can actually accomplish, or “actionable items”, if you will. Not everything we discuss has to be with 3.5 specifically in mind, and they can be both enhancements and dream features, but we should aim to come out of the meeting with some items that we can confidently propose to accomplish within the cycle, or even better, early in the cycle.

We should also take a little time after that discussion to talk about the actual process of iterating designs, the code to power said designs, cross-browser and 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). (https://en.wikipedia.org/wiki/Accessibility) issues, code testing and review, and submitting patches for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. For those of you who aren’t comfortable with SVNSVN Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation. Its goal is to be a mostly compatible successor to the widely used Concurrent Versions System (CVS). WordPress core and the wordpress.org released code are all centrally managed through SVN. https://subversion.apache.org/./patches/the code-y bits, don’t worry one bit. We’ll be talking about how we can combine our collective strengths to get things done together.

P.S. CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. coding standards have not been forgotten. In fact, they are available for you to see and comment on, if so inclined.

It’s summary time Recap We’ve run 3 users…

It’s summary time.

Recap

We’ve run 3 users through the same set of scenarios (via usertesting.com). You can review the results here, here, and here.

Disclaimer

Now… What exactly are we trying to accomplish with all of this?

It’s important to note that we have to think about these discoveries in the context of the typical WP user. But to be honest, I’m not entirely sure I know what the “typical WP user” looks like (but I hope to dig into that over the next couple of months ;-)). Sure, I have assumptions, as I’m sure you do, but my assumptions aren’t backed by any sort of data.

The important thing to keep in mind here is that these 3 people were paid to perform a list of tasks. While we can benefit from watching their interactions (and looking for patterns of complexity/confusion), we need to recognize that the flow they follow is prescribed, and likely different in some ways from an actual user.

Overview of discoveries

Here’s an unfiltered list of observations across all of the tests:

Background

  • Had trouble figuring out how the color selector worked (x3)

Dashboard

  • Unsure what “QuickPress” was
  • Unsure where “1 post”, “1 page” came from under “Right Now”
  • Had lots of trouble finding a link to view their site

Media Upload

  • User clicked “Select files” when they actually had a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to paste (and should have used the “From URL” tab). (x3)

Post Add New

  • Lost all changes when she clicked a link taking her away from the new post page (after already making some changes)
  • Didn’t notice “Insert into post” button when adding an image in the media modal
  • Clicked “Preview” button, but didn’t realize a new tab had opened (causing confusion)
  • Doesn’t appear to be a clear path for users that just wish to post a photo

Settings

  • Had trouble knowing where to go to change her site title (x3)

Toolbar

  • User didn’t notice links in toolbar (x2)
  • User never noticed “+ new” dropdown (x2)
  • The blog dropdown menu is completely different when in the admin vs. on site (should it be?)

Twenty Eleven

  • Confusion over why the 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. image was changing (x2)

Next steps

This is where I need your insight/input.

1) First, is there anything that you noticed that’s not on this list?
2) Next, which of these do you think we should attempt to address (are there any quick wins that would benefit all WP users)?
3) If you had to prioritize your list, what would you tackle first?

I’ll hold off for a day before I post my thoughts. Don’t be shy! 😉 I’d love to hear what you think.

#discovery-cycle-1, #user-testing