Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
It was great for quite a few of our group to meet at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. San Francisco and work in person on the image flow (@siobhan, @mor10, @teamadesign, @dh-shredder). We had a lot of amazing conversations with different designers, developers and other people from the community at WordCamp San Francisco and the Community Summit and Contributor Days about Image Flow.
We thought it would make sense to post a list of high level user requirements that we want to make sure we’re keeping in mind throughout the design and development phase and that we can test for.
High level user requirements for Image Flow:
IN MODAL / EDIT FLOW:
IN WP EDITOR:
We also wanted to compile a list of the major pain points with the current image flow:
PAIN POINTS WITH OVERALL EXPERIENCE:
1. Options in image flow are too many and confusing, no obvious flow
2. Three-column grid presents too much focus on library, when main options after selection an image are in right sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
3. Image editing options are hidden behind a small “edit image” link (not easy to discover)
4. Image flow is not usable on mobile, we suggest to disable / hide “Edit Image” functionality on mobile, until we can fix it and it works
5. Confusion about editing context (Original image, Attachment Page, In-Post Instance)
6. Images with a caption can’t be moved in the visual view of the editor
7. Add, edit, remove caption is hidden and should be easily to add
8. Image alignment is out of context and hidden away in the overlay, it should be part of an in-editor toolbar
9. “Add Media” is a confusing term to users (doesn’t always translate to image was the user feedback we got)
PAIN POINTS WITH ITERATIVE FUNCTIONALITY:
10. Crop and scale tools are unusable and unintuitive (options, ratio, saving) – I opened a ticket about improving cropping functionality #30155
11. Gallery flow is unintuitive
12. Image editing help flags copy is confusing
13. Action items (ctas) for inserting images are often below the fold
We’ll be posting updated wireframes later today and the feedback we got. We as a group are very excited about the direction and the shape this project is taking!
