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.
We’ve had an exciting 72 hours (ish) in San Francisco, and not just because 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. SF was such a well run, fun and inspiring event.
As folks from the team began arriving and looking over our finished wireframes on Invision (thanks to @pabloperea for the hard work) questions began to arise. @ryan (as he expressed on gitter) remained quite concerned with the mobile experience and particularly the icons over the images. The frames seemed a bit awkward – stuck between the current experience and something new. With this in mind @siobhan felt that we should take a look at the problem with fresh eyes and see what we could come up with. We did so. @sonjanyc and myself made some rough sketches on Friday and Saturday, getting feedback from @melchoyce @avryl @azaozz and @mor10 during Sunday’s contribution sessions.
Presented here are the sketches of our mobile approach that I put together and refined from the feedback over the weekend.
The image on the left demonstrated the basic state. The image is presented, uncropped in a square that is the full width of the screen. If a user swipes left or right they can scan through their image library. Along the bottom are buttons (left to right) to select the image for multi-select use, a large insert button, and an ellipsis that reveals further, contextual actions (create gallery, set featured imageFeatured 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., etc). @mor10 has suggested that the insert button be a next button to allow us to enforce better semantic web and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): enforcing alt tags, title tags and the rest of the image metaMeta 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. This can be discussed in more detail.
Along the top are buttons (left to right) to show a grid of images, to reveal metadata, to edit the image and to cancel out of the insert media area. Tapping the top left grid icon swaps to a tight grid view of square thumbs – represented in the second sketch here), a user tapping on any image takes them back to the full-size view. If the pull down, a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. drop down is revealed, they can search, toggle on multi-select, or insert directly from this view if desired.
If the user taps the ‘i’ info icon button (2nd from left in the top) the image flips to reveal the meta-data form and file info (as well as the thumbnail) within the square ‘card’ that contains the image. They can swipe left and right to scan through their library, and all files will be in metadata mode. Users can easily bulk enter data in this way, and they can get a better handle on file versions and other subtle differences with this view. On larger screens they would see a grid of the meta-data view. If a file did not have any metadata entered (or perhaps no title and alt tag) the insert button would be next and would lead the user to fill in the missing data.
Finally we have the edit mode. If the user taps the edit button, the edit tools replace the top menu bar, with an option to go back to cancel out and an ellipsis button on the right to cycle through the tools (the toolbar could also be swipe-able but that’s not particularly intuitive). Choosing a tool would replace the toolbar with the options for that tool. Along the bottom of screen we have the option to undo/redo actions, save the action and to finish and save all. In this edit state the user can still swipe left and right to move through images for editing.
We know this is a significant departure from the work that we’ve done thus far, and are interested in getting more feedback about this direction. Here in San Francisco this seems like a step in the right direction and worth exploring further. We’ll be discussing it tomorrow at the Community Day, as well as on Tues/Weds Contributor Days with the intention of finishing up some high-res more realized frames and flows.
Thanks to everyone who has participated in getting the project this far, and all of the new voices that spurred us to reconsider our assumptions!
Here is the new awesome slack channel for the group, the gitter room is thing of the past. https://wordpress.slack.com/messages/feature-imageflow/
You must be logged in to post a comment.