Image Flow Update 29th October: WCSF Progress report

We’ve had another productive day in San Francisco – thanks to all who have been assisting. @sonjanyc @mor10 and I took some initial feedback from @mel and @lessbloat regarding the rough sketches and moved into Balsamiq to make some example flows based on specific scenarios.

We met with @markjaquith, @ericlewis and the remote team (thanks to all who could make it!) this morning to walk through the flows and get some feedback on whether the major build effort required by our approach is worth the possibilities presented by the vision. The consensus was that while there are many details to get right, this is a BIG task worth pursuing.

Later in the day, after we refined the Balsamiq flows more completely, we met again with @dhshredder, @lessbloat, @filletto, @samuelsidler to walk through the flows based on each scenario. There were some specific notes and details that were discussed at length, but the overall feeling was that this should move forward.

The next steps for the team are:

  • create wireframes for in the browser
  • spec the flows to solve for the following scenarios

** add a single image (new image)
** add a gallery
** add and edit an existing image

  • begin github project for flat HTML/CSS/javascript prototype
  • build prototype!

The flows can be accessed here:

https://wordpress.mybalsamiq.com/projects/imageflowmobilefirst/grid

You should even be able to play with prototype, though I am totally unclear on what the Balsamiq sharing experience is.

#image-flow

Feature Plugin: Improving Image Editing

Image editing in WordPress isn’t fun. It’s possible, but it isn’t fun. Bringing image editing into the media modal was pretty awesome. Now people can edit images from the modal (yay!) but they also realise how frustrating that image editing experience is (boo 🙁 ).

WordPress is not an image editing platform, but we do offer some minimal image editing tools and, since they’re there, they should be intuitive instead of anger inducing.

Image editing is an area that’s ripe for improvement, so we are proposing an image editing feature plugin to see how we can improve things.

At the WordCamp Seattle contributor day, myself, @sonjanyc, @mor10 and @DH-Shredder started some discussions about how we can improve the image editing experience in WordPress. Below is what we discussed:

What we want to provide to users

  • a set of simple image editing tools that just work (crop, rotate, scale)
  • image editing tools that integrate better with image uploading workflows
  • image editing tools that are easy to access
  • an interface that is extensible so that plugin developers can create advanced image editing which can be easy integrated

Process
We discussed the process for the way forward with the project:
1. Creating personas and workflows
2. Conducting interviews with user types (photoblogger, food blogger, tutorial writer, multi-author blog editor, etc)
3. Looking at how other platforms provide image editing functionality
4. UI mockups
5. Design
6. Coding
7. Testing

Tickets related to image editing

And here are some mockups that were done around 3.5 from @lessbloat

If anyone would like to be involved in this project, please let us know. We have a Skype group and we can start kicking off weekly meetings, either in IRC or Google Hangouts. It’s in the very early stages and we’re planning to take things slowly since we all have other commitments, but we can get things moving more quickly if with more involvement.

Here are some things you could help out with:

  • conducting user interviews and writing up the research
  • researching other platforms, writing it up, providing screenshots
  • mocking up workflows
  • mocking up the UI
  • designing the interface
  • coding like a boss
  • coding like a backbone boss
  • user testing
  • feedback, insight, rants, cheerleading

You can email me to be added to the Skype group or let us know in the comments

#feature-plugins, #image-editing, #image-flow

Widgets Sept 23 Chat Notes

We had our weekly chat yesterday. If you weren’t there, you can always check out those cool log things.

A few highlights:

  • We adopted the Widget Customizer plugin as our customizer prototype
  • I tossed out the idea of a “mission control” view for the tabbed prototype, which would let you see all your sidebars at once. The goal with this is to make it easier to move (and maybe copy) widgets between sidebars. Check out the video of this concept in action.
  • We pondered the question “Can the tabbed prototype and the customizer prototype coexist?” Turns out every one seems to agree that both interfaces can coexist. The tabbed prototype lends itself to more advanced functionality with lots of widgets, while the customizer plugin makes it super simple to edit (and perhaps add) widgets to the areas that are currently visible in the preview.
  • I brought up the idea of a way to preview widgets from the tabbed prototype. Turns out this is difficult (and maybe impossible) to accomplish since we won’t know what page the sidebar lives on, or if it even exists. I’d love to find a way to make this possible.
  • Weston got his temporary hooks included in 25580 — yay! This opens up a lot of possibilities for the customizer plugin.
  • We discussed a few ideas for how to add widgets from the customizer. I whipped up a quick sketch showing an extension to the customizer bar.
  • We discussed cleaning up the list of available widgets. The tabbed prototype has renamed a few widgets, and removed the descriptions.
  • Weston brought up the idea of preview thumbnails for widgets. The thumbnails would show a preview of how that widget would look in the current theme. This would require that all widgets have some “dummy” content. Perhaps we could extend this to existing widgets, as well. Having a preview of each widget in the tabbed prototype may help solidify the connection to their location on the front-end. Super cool idea.
  • We discussed the menu-like prototype briefly. I’ve chatted with jtsternburg about his progress. He and his his wife recently welcomed their third child (and future blogger) into the world — congrats! As his time is limited, he’s unable to continue work on the menu-like prototype. He’ll be sharing his code soon, so we can pick it up and get it to a testable stage.

Our next steps:

  • Continued work on the customizer plugin, and lots more user testing.
  • Connect with the front-end team to see how we can collaborate with widget editing.
  • Pickup the menu-like prototype and get it to a testable stage.
  • Follow @lessbloat‘s lead and create a planning spreadsheet to help define tasks and roles.

I’ll be out of town next week. While I encourage everyone to meet in IRC, our next official meeting will be in two weeks on October 7th, 2013 @ 20:00 UTC.

#widgets

@saracannon has posted her take on a new…

@saracannon has posted her take on a new direction for post format UI, addressing some of the concerns that surfaced after @lessbloat‘s tests. Re-thinking WordPress Post Format UI.

The one that is closest to what I was thinking, and the best balance between showing the new UI (to people who are already using post formats or who have a theme with special support), and getting it out of the way once you’ve chosen, is the “In Page decision with post editor greyed out” one.

post-formats-classic-i-copy-1024x698

I’m curious to know what the UI team thinks. I’d like action taken on this ASAP, so that we can get the UI settled for beta 2.

#post-format-ui

Have made it through the second round of…

Have made it through the second round of user testing videos for post formats (thanks, @lessbloat). 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.

Tasks:

  1. Login
  2. Look at the Dashboard and get to add post from toolbar
  3. Add a (standard) blog post with title and text
  4. Preview your blog
  5. Add an image blog post, with image from a URL
  6. Add a video post, with YouTube video URL provided
  7. Add a link blog post
  8. Add a quote blog post
  9. Add a gallery post
  10. Preview your blog again to see all the posts

Test 1: http://wpusertesting.com/videos/DC7-3.mp4

  1. Fine
  2. Fine
  3. Takes a moment finding the Publish button, but otherwise fine.
  4. Fine
  5. Notices it says nothing about a title; adds one anyway. Uses Add Media -> Insert from URL.
  6. Again goes to Add Media -> Insert from URL. Inserts the video, which gets linked. Doesn’t work for oEmbed to have it linked 🙁 Again adds a title herself
  7. 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.
  8. Corrects then to than 😀 Adds it as plain text in the editor.
  9. Add Media -> Media Library (woo!) Selects the three images using multi-select and inserts them all into the post.
  10. Checks the sesamestreet.org link, which works. Then she closes the tab, so it’s over before getting to see some things like video.

Overall observations:

  • She never once noticed the post formats metabox or wondered why the instructions were telling her to write blog posts of various kinds.
  • Not having a title bothered her a bit, perhaps because it looks so important/required.
  • The media modal certainly seems usable/comfortable, as she kept returning to it and was really quite handy with it.

Test 2: http://wpusertesting.com/videos/DC7-4.mp4

  1. A little copy paste mishap, but otherwise fine
  2. Fine
  3. 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.
  4. Fine
  5. 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.
  6. 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.
  7. 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 🙂 Wonder what she uses…
  8. 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.
  9. 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.
  10. 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.

Overall observations:

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

#3-6, #post-formats

Coming soon: Weekly updates

Part of the duties of a team rep for each area of contributors is to be responsible for a weekly update on the group. At this moment, there is not an established UI team rep, but as a core development team representative, I’m happy to step in until new elections are done sometime in the near-ish future.

Part of our UI group discussion at the Community Summit was about how we can make these weekly updates both informational and effective, especially when it comes to attracting and retaining contributors. Here’s what we’re thinking:

  • A breakdown of what we did this week, such as discussions held (with links to IRC as applicable), patches uploaded/worked on, and what’s changed in core in a more prose-y manner.
  • Links to ideas from the community at large, which would likely be blog posts on other sites, including your own. Discussion would be encouraged over on those posts rather than here – the creator should be able to really take ownership and pride in their idea and be centrally involved in the discussion. The idea is to both expose some of the great ideas that are happening and open up a platform for idea generation that isn’t “from the top” or carrying the official weight that gets associated with a post on the Make P2s, which are largely status-driven rather than hypothetical.
  • Weekly IRC chat summary with anything not covered above.
  • What needs to get done this week, including any assignments that have been made and ones that need volunteers. We’re thinking this will be a great step toward exposing more ways to get involved in case you’re still figuring things out.

Thoughts? Love it, hate it?

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… 🙂

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 customizer (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 page

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