It was great for quite a few of our group to meet at WordCamp 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:
- User inserts single image
- User creates image gallery
- User edits single image
- User bulk edits images
- User adds meta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data
- User sets featured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.
IN WP EDITOR:
- User aligns image
- User replaces image
- User adds caption to image
- User scales image
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 sidebar 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!