Ready to get started?Download WordPress

Make WordPress UI

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • Siobhan 4:07 pm on August 29, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 29th August 2014 

    Thanks everyone who came to the meeting. Here’s the link for anyone who wants to catch up.

    Goals and Objectives

    We discussed the goals and objectives of the project. We agreed that, rather than tinkering around the edges, the project should be focusing on a complete overhaul of image editing, with a focus on usability.

    @mor10 asked questions in the chat room which we discussed.

    What role does the Image Editor play in the regular process of adding images to posts and pages? And more specifically, what functionality should the user reasonably expect to be available from the image editor out of the box?

    We’re aiming for tighter integration of the image editing tools with the image upload workflow. At the minute they feel very separate. The user should expect limited functionality out of the box.

    Where is the Image Editor positioned in the user workflow? Does it belong in the modal itself? Does it belong in a separate modal like it does now?

    We envisage this being in the modal.

    What image editing functions belong under a separate “Edit Image” tab and what functions may be better placed elsewhere, either in the image modal or in the content editor itself?

    Basic image editing in the modal and advanced options elsewhere.

    Labels and Terminology

    Pablo created a labels and terminology document. If anyone wants to review it you can add to the list of the takeaways on the right of the spreadsheet.


    We’ve added some mockups to the folder. We’re spending another week working on these.

    Other stuff:

  • Siobhan 4:23 pm on August 22, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 22nd August 2014 

    Thanks everyone for coming to the meeting! If you missed it, you can catch up with all out lovely faces right here.

    Here’s what happened:

    User Interviews

    We discussed the user interview document. If anyone has any additional thoughts on it please leave a comment. These were the main takeaways:

    • users aren’t aware that the editing tools are available
    • The “link to” option is confusing to users. They don’t understand what the options do
    • The crop tool confused every user
    • labelling is confusing throughout
    • we could use better icons
    • it’s not obvious to users that the images they upload aren’t attached to a single post but are available throughout
    • the edit original text isn’t clear


    • need a volunteer to create a spreadsheet that lists all of the labels and terminology and looks at what other platforms do so we can start working on improving naming conventions
    • need someone to review the media grid user testing and come up with a list of things relevant to this project
    • @siobhan to talk to gcorn about decisions made about options in 3.9
    • everyone to review the UX workflow document to see how we can streamline things

    Next Step

    It’s time to start sketching out what you think the media modal should look like. That’s this screen right here:

    Screen Shot 2014-08-22 at 17.19.09

    If you haven’t yet, it’d be worth looking at the media grid in WordPress 4.0. We should aim for consistency across the UIs

    Use whatever tool you want. If you want access to the wp.org balsamiq account let me know and I’ll add you.

  • Siobhan 4:13 pm on August 22, 2014 Permalink | Log in to leave a Comment

    UX Flow for Image Uploading and Editing 

    @teamadesign has created a detailed workflow chart for uploading and editing images in WordPress.

    We can use this thread to interrogate the workflow and see how we can streamline it. If you’re interested please leave comments. We’re interested in the following:
    1. Which steps can we remove from the workflow?
    2. Can any steps be combined?
    3. Are there any paths that are confusing?
    4. Is their any functionality or options that we can remove completely?

    • berkun 4:24 pm on August 22, 2014 Permalink | Log in to Reply

      Is this flowchart supposed to be based on 3.92 or 4.0?

    • hearvox 6:32 pm on August 23, 2014 Permalink | Log in to Reply

      The (excellent) flowchart got me thinking of several possible impediments in the Media workflow. Perhaps it’s too far in the process for my $0.02, but here goes anyway. I’ve taught dozens of folk to use the WP image edit tools. Some use them regularly, others never touched them again. I occasionally use them (but much more often need Photoshop’s features — mainly the compression tools, 2 Up views, and file-size estimates.) Among the issues the WP image editor has — some for me, some for others — are:

      • 1. EDITED/ORIGINAL RELATIONS- The UI doesn’t make clear how the edited copy and the original relate. The edit gets an appended filename (ImageName-e123456.jpg). It’s easy enough to restore the original in the Edit Image screen. But outside of that all connection to the original is obscured, in both the Media Library and Add Media screens.

      The Attachment Details section still lists the original’s filename: ImageName.jpg, while the Link To: Media File refers to the edit (…/ImageName-e123456.jpg).

      A quite common use case would be to scale an image for display in the post but link to the larger original. That’s not simple unless you hand-edit the href (removing the added filename chars).

      Perhaps the Attachment info can always indicate you’re viewing an edited image, w/ some ref to the original displayed. Two possibilities (both in Attachment Display Details section): the “Link To:” pulldown could offer “Original File” as a selection for an edited image. And/or the “Size:” pulldown could offer “Original” as an option.

      • 2. PNG BLOAT- I have occasionally uploaded PNGs and found the post-upload processing created much larger than expected filesizes for thumb/medium/large version — larger than the originals. Haven’t tested further to find what parameters might have triggered this — can do so if it’ll help.
      • 3. MEDIA UPLOAD SUB-FOLDERS- I work on mid-sized journalism sites, w/ dozens of users and 100s or 1000s of attachments. Even non-tech users often go in via FTP: can be faster than Media Library to see what’s where and what’s named what. The ability to organize into year/month folders is quite helpful. But offering a, option to add/upload-to additional user-named sub-folders, w/in yr/month, would really enhance file management.
      • 4. SELECTABLE MULTIPLE IMAGE SIZE CREATION- Speaking of FTP views, would be enormously helpful if you could chose when to and when not to create multiple image sizes of an uploaded image. Our typical posts may have 10 images, but only the feat.img and maybe one other need multiple versions. But w/ end up w/ 40 imgs instead of the 10-12 we want; this makes it harder to find imgs via FTP (and causes storage bloat).

      I know the above, esp. the last two, are: if (wishes == horses) { beggers.ride };

      And there’s probably scripts out there that do what I propose (tho I’ve looked and haven’t found). But perhaps in the Media workflow process, there’s room to think about some these features. Be happy to help in any way.

    • szepe.viktor 3:53 pm on August 25, 2014 Permalink | Log in to Reply

      Good morning!
      Is there a mailing list (or something like that) for ideas?

    • szepe.viktor 4:32 pm on August 29, 2014 Permalink | Log in to Reply

      Could you help me about this idea? (solarized color scheme)

  • Siobhan 3:27 pm on August 15, 2014 Permalink | Log in to leave a Comment

    Image Flow Meeting 15th August 

    Thanks everyone who attended the meeting. You can watch it here: https://plus.google.com/events/cgp24dsgqid508vngn506ga8r20

    We discussed:

    User interviews

    We agreed that we want to move on from the user interviews next week. These all need to be written up, so we agreed that the following people would take responsibility for one each:

    @mor10 has created a document for the findings. @mor10 can you please add any sections/ questions you think ought to be looked at/answered by Sunday evening. Everyone else will be documenting the interviews from Monday.

    Everyone else – please have them written up by Thursday so that ppl have time to read them before the meeting.

    User workflow

    @teamAris has created a user workflow diagram that maps out the image upload/editing workflow to help us identify specific points where there are problems in the workflow.

    The aim for next week is to have the user interviews written up so we can move on to working out ideal workflows.

  • Siobhan 6:37 pm on August 8, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 8th August 

    Thanks everyone who attended the meeting. Here’s what we discussed:

    Market Analysis

    We looked over the market analysis. The main findings are here, but in case you don’t want to read, the salient points were:

    • most blogging platforms don’t have any image editing tools other than sizing, alignment, and adding captions
    • platforms with heavy image editing use third party editors such as Aviary (Squarespace & Flickr) and Picasa (Blogger)
    • the platforms with the simplest UIs are the most effective, with Aviary providing the cleanest UI for actual editing

    User Interviews
    @mor10 has carried out 4 interviews and has some more planned. He’s looking to interview someone who uses WordPress professionally and someone who manages a multi-author blog. The interviews will be written up over the weekend. He’s going to connect with @sonjanyc to update the personas. We’ll review the personas and user interviews next week at the meeting.

    Meeting time
    We agreed to change the meeting time to Fridays at 15:00 UTC

  • Siobhan 6:53 pm on August 2, 2014 Permalink | Log in to leave a Comment

    Image Flow Update 2nd August 

    Thanks to everyone who attended the image flow chat yesterday. If you weren’t able to attend, you can catch up on the meeting here.

    What was discussed

    • we agreed to work on the market analysis until next Thursday, after which point we’ll review what’s been done and what we can learn from each of them. I suggest that we do this by creating a collaborative document that we can use to come up with a list of things that we want to learn from each platform. We can discuss these at the Friday meeting.
    • the personas and user interviews aren’t complete yet. These should be complete by 15th August.

    @klosi asked in the chat room about changing the meeting time. We’ll need a time that will accommodate people in the following time zones.


    Anyone got a suggestion about a good time?

    If anyone wants to join in, you can join our gitter chat room here.

  • Jerry Bates (jerrysarcastic) 7:24 pm on July 22, 2014 Permalink
    Tags: ,   

    Media Grid – User testing round 1 

    We recently performed some quick user tests on the Media Grid (at Beta 2) to see how users fare when performing various tasks, and came out with some interesting results.

    TL;DR - The concept of the Media Grid was intuitive and easy for users to understand, especially navigation and editing metadata; however, uploading media and bulk selection tasks were still problematic for most. A lot of work could be done to make these more straightforward.  

    We also tested hiding all metadata (title, mime type, etc.) from the grid view, and saw no difference in performance, which hints at the possibility that metadata is not as important here as it is in the list view.

    Follow the jump to see more details about this round of user tests. (More …)

    • Helen Hou-Sandi 2:49 am on July 23, 2014 Permalink | Log in to Reply

      Bulk select is a tricky interaction – the persistent checkboxes are already round 2. What can we do there to make it better? Fade more things out? Re-explore a separate mode?

      @melchoyce and I discussed hiding all those extra fields by default and just letting people turn them on if they really want them (that is, the power users that tend to volunteer for interviews). I think that is a good route to go, though a part of me feels that “off by default” makes it silly.

    • Eric Andrew Lewis 2:51 pm on July 23, 2014 Permalink | Log in to Reply

      I’d like to revisit and user test a fixed-to-bottom toolbar where bulk action buttons can go.

    • Mickey Kay 1:05 am on July 24, 2014 Permalink | Log in to Reply

      I like this idea. Would love to see/test.

    • Matt McLaughlin 8:41 pm on July 29, 2014 Permalink | Log in to Reply

      I just fundamentally don’t get the “Select function from drop down, then hit this separate button for ‘activate function'” UI. Why would you not simply have a delete button? I’ve never really understood the way word press does bulk actions. And if you’re going to go with buttons, why would you put them at the bottom rather than the top?

      Isn’t the simplest solution here to just replace the bulk actions pull down + apply buttons with buttons for the actions themselves? If you have more actions than fit in the bar, make the rightmost a “More” pulldown for the least used actions.

      You should also separate out the “Changes the filters or views” functionality from the “Does something to the images I’ve selected” functionality. My suggestion would be to put View, Filters and Search on one bar and the “do something” buttons like delete on a second bar just below it.

    • Matt McLaughlin 8:56 pm on July 29, 2014 Permalink | Log in to Reply

      Sorry for the late replies, but a few more thoughts:

      1) Not only is the meta-data not necessary, but the check box thing isn’t necessary either. A much more visually elegant way to do this would be to use the bright blue border to indicate selected, and at the same time grayscale out the non-selected images. Use standard optional keystrokes for multi-select (shift selects everything in between and command does non-contiguous multi-select). If you’re worried about discoverability put a little tool tip somewhere.

      2) A “Deselect All” Button would be nice

      3) If you’re going to add a button bar with Edit, Delete, etc. then it makes sense to put the Upload/Add media button in that bar instead of weirdly floating by itself next to the title.

      4) It’s a little hokey, but if you’re worried about people not realizing they’re editing multiple photos you can have the buttons change names on multi select i.e. “delete” becomes “delete all”.

    • Paal Joachim Romdahl 6:37 am on August 17, 2014 Permalink | Log in to Reply

      White thumbnails with black text or low contrast color and the contrast between the background color of the media library. Having a way to perhaps also adjust the thumbnails seen in the media library.

    • Paal Joachim Romdahl 6:41 am on August 17, 2014 Permalink | Log in to Reply

      Sort media by alphabetical order in addition to by date and type.

  • Siobhan 7:15 pm on July 18, 2014 Permalink

    Image Flow Update 18th July 2014 

    Thanks everyone for coming to the very first meeting about image editing. It’s excited to have a group of people ready to tackle this! The video of the meeting is here. Here’s what we discussed:

    Name: Our name is “Image Flow”

    Scope: The scope of the project is to look at how we can improve image flow in WordPress, including uploading and editing.


    The process will go in the following stages:

    1. Research: (Current Phase) – competitor analysis, user interviews, personas, document current workflows, ideal workflows
    2. Wireframes: proposing different wireframes for the plugin
    3. Development: coding a crazy storm, testing, feedback, iterating

    Current Tasks

    Current tasks are as follows:

    • interviews: @mor10 is working on user interviews (3 completed so far). We would like five or six. @mor10 to either complete all interviews or make interview questions available in Google Folder and delegate
    • personas: @sonjanyc is taking point with personas. The persona is to be updated. Info from @mor10‘s user interviews to be integrated with the personas
    • competitor analysis: Daniel is taking point on carrying out the competitor analysis. In the first stage this will focus on how other platforms deal with image uploading and editing.

    Ongoing tasks

    • information organisation – Daniel will be responsible for ensuring that documentation in the Google Folder

    Tasks we need help for:
    -interview write-ups: someone need to watch @mor10‘s videos and write them up for make/ui. The write up should include: 1) a summary with info about the type of user, 2) a list of problems encountered by the user, 3) suggestions for improvements that would help that user.
    -document workflows: we’ve created a list of tasks that a user would do in the image editing workflow. It would be useful to document these with screenshots. By working through the workflows we can identify stumbling blocks.


    I won’t be here next Friday (holiday!!) so I appoint @mor10 to set up the meeting. Please check in with progress and to see if anyone needs help. If anyone needs set up on make/ui please bother @samuelsidler :)

  • Siobhan 12:43 am on July 18, 2014 Permalink
    Tags: ,   

    Image Editing Meeting Agenda – 18th July 

    We’re having the first meeting of the image editing group tomorrow: Friday at 18:00 UTC. Below is the agenda:

    1. General Introductions
    2. Discussion of project scope (and name) (also, talking about the feature plugin process)
    3. Discussion of project stages
    4. Review of work done so far (personas, user interviews, competitor analysis)
    5. Assigning tasks

    If anyone has anything else that they would like discuss, please leave a comment.

    I will post the link to the Google Hangout here 15 mins before the chat.

  • sonjanyc 7:28 pm on July 12, 2014 Permalink
    Tags: ,   

    Image Editing UX Research: Personas 

    I was meeting with @siobhan last week to work on creating initial personas for Image Editing in WordPress. We came up with 6 main personas with different skill levels, goals and frustrations (for details see link below):

    1. Novice Blogger
    2. Experienced Blogger
    3. Photoblogger
    4. Mobile Photoblogger
    5. Multi-author Blog Editor
    6. Tutorial Writer

    We’ve put together a Google Doc for these personas and I’m sure we’ll refine it in the course of the next weeks, possibly add another persona or so: Google Doc Personas

    We’re thinking of providing a form for others to fill out to collect more data and to learn more about user’s image editing workflows, pain points and expectations.

    We’ve also put together a list of general user flows/tasks around Image Adding and Editing that will help us account for how people are using the image editing tools. Please share any additional flows/tasks you feel are missing in the comments below. (Google Doc Flows/Tasks)

    Adding/Editing Images

    • User uploads individual image and inserts into post
    • User edits image after insertion into post
    • User uploads individual image and edits prior to inserting into post
    • User uploads multiple images and wants to bulk edit images
    • User uploads multiple images and wants to edit single image
    • User uploads multiple images, inserts into post, and positions images in post editor
    • Editor edits images uploaded by another user

    Specific Editing Tasks

    • User crops an image
    • User rotates an image
    • User flips an image
    • User rotates an individual image
    • User wants to individually rotate multiple images
    • User wants to bulk rotate images
    • User resizes an image by presets
    • User resizes an image to custom size
    • User wants to bulk resize images
    • User undos / redos editing steps
    • User deletes an image
    • User wants to bulk delete multiple images

    Adding/Editing Photo Galleries

    • User uploads multiple images to create photo gallery
    • User creates gallery from selecting images in media library
    • User edits images in existing gallery in post
    • User wants to chose from different gallery templates / grids

    We deliberately kept this exercise high level without creating any wireframes or mockups yet. I feel it’s important to understand the users and what they want to do first before we dive in.

    Next steps are to document the current workflows and pain points. We also want to look at other image editing solutions and what we can learn from those.

    We would love to hear your feedback!

    • Jon Brown 8:03 pm on July 12, 2014 Permalink | Log in to Reply

      Curious. Is this intentially limited to things a user wants to do and can given the existing toolset? Or should it include things users want to do but currently can’t? Ie. Add text overlay to image, add watermark to image, apply filter to image, combine images (create dypitch/tripitch)?

      • Matt McLaughlin 1:41 pm on July 14, 2014 Permalink | Log in to Reply

        I’ll second this. Adding text overlays or watermarks (think branding logo) to images would be a very nice addition and would save a bunch of time in photoshop. Most filters seem more like plugin territory, but it would be nice if there were say 2-3 core filters and a standard place in the UI for them to live so that 3rd party filter developers could make theirs live in the same consistent place in the UI rather than spraying UI all over the backend.

      • sonjanyc 12:08 am on July 15, 2014 Permalink | Log in to Reply

        Thanks for your feedback Jon – @jb510
        We were mainly looking at basic tasks to make sure the foundation is solid, but we also want to look at some more advanced functionality.

        Though I understand that for example adding watermarks to images and combining images are very essential for some websites, I’m not sure if this would be used by the majority of users. However, this would be a good opportunity for plugin developers. We want to help accommodate space in the UI for plugins to add more niche functionality.

        • Jon Brown 12:32 am on July 15, 2014 Permalink | Log in to Reply

          I haven’t looked at the hooks in the image editor in a while. There are plugins like aviary-editor that offer much more advanced image editing capabilities. They do so in a UI wholly removed from the WP Image Editor (link in media library list view). Also thinking of wp-retina-2x. It would be awesome if the native editor could be extended with complete image editing libraries like Aviary and plugins like WP Retina 2x.

          I’d say one missing basic feature is the ability to reupload/replace an image. While there is a good plugin for this enable-media-replace, it really seems like something core should be able to handle.

    • venkmanuk 5:54 pm on July 13, 2014 Permalink | Log in to Reply

      i think this all looks good, and it’s important to keep it at a high level until you get this sort of thing nailed.

      one thing i have seen with the Novice Blogger is they have no understanding of the platform and tools and so their expectations of what (they hope) can be done could vary from crop/resize/flip all they way to creating layered arrangements of images, adding extra graphics and so on. this could be covered by a tutorial intro or something maybe. but they really have no idea. :)

    • tobifjellner 7:21 am on July 14, 2014 Permalink | Log in to Reply

      Is it possible to re-position an image in a page/post by simply dragging? (I’m to html-centric to even try, but I believe that such a possibility could be popular, even for me.)

      • tobifjellner 7:26 am on July 14, 2014 Permalink | Log in to Reply

      • tobifjellner 7:27 am on July 14, 2014 Permalink | Log in to Reply

        Wow, I had no idea that a single letter “o” in the start of a row would get heavily reformatted. :)

      • Jon Brown 12:25 am on July 15, 2014 Permalink | Log in to Reply

        You can drag the insertion point of an image around in the visual editor and using the text align tools will toggle the image between alignright, alignnone, alignleft. These aren’t image editing though, that’s content.

        What exactly were you referring to?

    • TCBarrett 7:58 am on July 14, 2014 Permalink | Log in to Reply

      Is ‘blogger’ meant in a more generic term, or are personas who do not use WordPress to blog with excluded?

      Considering the amount of websites built with WordPress that are not blogs, and have no blog section at all, is a non-blogging site administrator worth considering?

      • Ipstenu (Mika Epstein) 1:15 pm on July 14, 2014 Permalink | Log in to Reply

        Generic. End User might be a better term.

      • sonjanyc 11:53 pm on July 14, 2014 Permalink | Log in to Reply

        @TCBarrett Good question. Since the Image Editing tools are the same for posts or pages, we didn’t distinguish between a user that adds/edits images in a blog post or a page. I would assume the Novice Blogger would often match the expertise or challenges a user would face that updates his site’s pages every now and then. I would assume this user wouldn’t use the image editing tools every day and therefore would need some more guidance.

        If you have any workflows that you feel would be much different for a website owner that doesn’t have a blog when it comes to adding/editing images, please share. We do want to make sure we’re collecting all main use cases.


        • Pablo Perea 6:54 pm on July 16, 2014 Permalink | Log in to Reply

          I think the photo editing process will be similar regardless of where you use it, in an entry or in a page. However, there may be differences when placing the images within the content.

          Example: On a list of services or products, it is normal to place text and image and keep the remaining space blank until next item (Not allowing the text to surround the image)
          These needs can be solved using plugins, HTML/CSS or Shortcodes.

          As commented above, these aspects are more related to content edition, but it is true that they have a natural relationship with the concept of text alignement and imagenes floating, and this last point is in the image editor.

          Do you think it would be interesting to include these aspects in the research?

          • sonjanyc 1:16 am on July 17, 2014 Permalink | Log in to Reply

            @pablo-perea Thanks for your feedback! I think it’s always good to look at all different use cases and then decide how relevant a specific use case is to the majority of people using WordPress. If you would like to provide a list of those cases that would be great!

            • Pablo Perea 8:24 pm on July 17, 2014 Permalink

              I usually use html/css to handle some features related to space and photo presentation, such as managing images and text like a block-level element, managing margins around the photo, choosing colour and size of the border… maybe bloggers also use these features, although perhaps they are more related to web designers.

    • Matt McLaughlin 2:02 pm on July 14, 2014 Permalink | Log in to Reply

      As a manager of a decently sized (150 users or so) multi-user blog, here are some things I’d like to see:

      • Quick Edit rename

      Our users upload a ton of photos named DSC2104.jpg and similar. I’d love a quick and easy way to rename them – preferably from the new grid layout media library rather than having to dive into the edit screen.

      • Conforming the aspect ratio of multiple photos

      Again, as a multi-user blog we get photos in a ton of different aspect ratios and we want some level of standardization of things like featured images. Also when putting together a gallery of photos with different aspect ratios it would be nice to have some control of the crops.

      • A standard way to deal with crediting others

      Each of our users gathers photos from a number of other people. “Uploaded by” is almost never the same as “photo taken by”. And there’s just no good way to deal with this since WordPress assumes that attribution should always fall to the uploader. I would kill for an “Attribution” field that defaults to the uploader but includes a drop-down for other blog users and an “other” category that allows you to attribute the photo to someone who isn’t a member of the blog.

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc