Wow loving the feedback that came in about…

Wow, loving the feedback that came in about the welcome screen. Thanks everyone!

I’ve got another design challenge for ya. What (if anything) can be done for the “add new” buttons?

They don’t really look like buttons to me. I tried simply adding the new default button style, but I wasn’t a fan. Thoughts on how these could be improved?

Mockups welcome… 🙂

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

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

I’d like to propose the idea of an…

I’d like to propose the idea of an official “WordPress 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. Advisory Group”.

Backstory

As you may have already guessed, I’m a big fan of data informed design. You’ll notice that I didn’t say “data driven” design. There is a difference between being data informed and being data driven. If you’re data driven, you are being lazy by allowing the data to make decisions for you (bad). If you are data informed, you are using the data to help you validate your hypotheses and make informed decisions (good).

Simple example

Let’s say your gut says you should move a signup button from the right side of the page to the left. In testing the button on the left, the biggest thing you should be looking for is to ensure that having the button on the left doesn’t completely tank signups. Even if the data tells you that having the button on the right is slightly better, you should trust your gut.

Summing it up

Use your existing knowledge to make a hypothesis. Use user testing as a safety check. As long as your change doesn’t sink the ship, trust your gut. Use data to help you make informed decisions, but don’t let data bully you around.

How does this “Advisory group” fit in?

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WP provides a unique challenge, in that there isn’t a super easy way to gather usage metrics. We can’t just slap KissMetrics or Google Analytics into core to see how users interact with the software (and for good reason). We’ve got to be a bit more creative.

I’ve been trying to think of a few ways that we could get feedback from users throughout the design process. I’d like to start with a simple email list.

Why would people sign up

I’d like for this email list to be a venue for people to contribute (thus shaping the direction of WordPress) without having to commit to spending any specific amount of time. They’ll simply:

  • Add their email to the list
  • Receive emails periodically with either 1) short 1-3 question polls, 2) simple click tests, or 3) requests for feedback about a certain design
  • Participate when they have time, and unsubscribe if they lose interest (or get too busy)

Where would we promote it?

Wherever we can get away with promoting it. 😉 But to start, we’d just add the subscribe field to the top of this blog (keeping it simple to start things off).

Where will the list live?

I’d likely just set the list up on Campaign Monitor (unless I hear objections to that idea).

Thoughts?

#advisory-group

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