Discuss: Icons

If you’re running trunk, you’ve probably noticed some new icons being tried on for size. There’s ticket #23333 on TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. 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 #23415, 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.

I’m seeing a few focal points for discussion:

  • 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.
  • 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.
  • 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.

Some helpful links from the 88 and counting comments on the ticket:

Ran another user through Discovery Cycle 1 this…

Ran another user through Discovery Cycle 1 this morning.

Here’s the video, and my notes:

Step two notes – Log in

No problems.

Step two notes – Explain what you see

No problems.

Step Three notes – Preview your blog

No problems.

Step Four notes – Change your background color

  • 3:36 – He had to play around a bit, but he figured out how to change the color to blue fairly quickly
  • 3:52 – He clicked the “default” button resetting the work he had done to choose a color.

Step Five notes – Change your site title

No problems.

Step Six notes – Add your first post

No problems.

Step Seven notes – Preview your new post

No problems.

Step Eight notes – Publish an image

  • 7:20 – Cool, he clicks into new media workflow. But unfortunately he’s looking to paste a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, which isn’t currently in the new media workflow just yet.
  • 9:05 – He discovers the “Upload/insert” link, and has no trouble adding the URL.

Recap

  • Overall, I’m super happy with this test. He completed everything in 10 min which is a great time (compared to where we started off at the beginning of the 3.5 cycle).
  • Happy to see the first user try the new media flow, even if it didn’t work out for him. We’ll continue to to test new users as that section fills out.
  • 7:30 – When he entered a URL into the media uploader, it appeared to succeed for a brief second, you saw a file upload happening briefly and then it disappeared (just a heads up @koopersmith).
  • Do we need to do anything about the “default” button in the color picker? Would be a shame if someone took a bunch of time to find just the right color, then lost it with a click.

#discovery-cycle-1, #user-testing

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

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.

Recap

  • 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

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

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

Resurrecting these This chat normally takes place on…

Resurrecting these! This chat normally takes place on Tuesdays, but was postponed due to some storm difficulties.

Reminder: Freeze is in two weeks. Responsive admin is our highest priority right now.

Responsive Admin – #18198

  • Discussed some webkit bugs when styling the admin. @saracannon is looking onto resolving.
  • Newcomers hhsandi and sabreuse will be looking into styling list tables. Welcome!
  • @azaozz recommended a focus an tablet optimisation for 3.3. Still keeping an eye on mobile, but some editor issues may prevent full optimisation for 3.3.
  • Discussed the problem of TinyMCE compatibility.
    • Since iOSiOS The operating system used on iPhones and iPads. doesn’t support contentEditable, almost no WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editors will work. iOS5 may be released before 3.3 and is slated to support contentEditable.
    • Will need to style tMCE buttons to be optimized for touch. Anyone on iOS5 welcome to help test :]

Menu Flyouts – #18382

  • Currently in trunk. Yay @koopersmith. Any 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. improvements/suggestions welcome.
[New User] Experience

 

View the IRC Logs for this chat. 

 

#meeting-summary, #summary