James Koster Shares Design Explorations that Transform WordPress’ Site Editor Into a More Visual, User-Friendly Tool

Automattic-sponsored designer James Koster has a imaginative and prescient for taking WordPress’ Web site Editor from its beta awkwardness and reworking it to change into a extra visible and user-friendly design instrument. In a latest submit titled Revising the presentation of key Site Editor features, Koster identifies unbalanced function weighting as a crucial design flaw that’s negatively impacting customers’ expertise with the editor:

The Web site Editor is a robust instrument, however the consumer expertise lacks some coherence and a way of hierarchy.

Template administration and enhancing has central focus, although it’s a product space that has confirmed troublesome for some customers to interpret.

Impactful options like type and menu administration are hierarchically relegated, and consequently ship a sub-optimal UX.

This week I’ve been ideating on how we would current website editor options with extra applicable weighting, in order that the general expertise feels extra like a design instrument.

As an alternative of dropping customers immediately into enhancing the homepage, Koster contends that the Web site Editor’s design needs to be up to date to change into a “navigable body” the place customers can choose from a menu of options and kinds on the left. This can be a radical enchancment over the present expertise, which appears like strolling right into a room with all of the lights on and a number of options competing for consideration.

“The mix of the location body (Browse mode) and one-click enhancing helps to obfuscate a few of the aforementioned confusion round template enhancing,” Koster stated. “Now you merely browse to the web page you need to replace, and click on ‘Edit’.”

One other thought Koster explored is a view that makes it simpler to know the interplay of kinds and templates. The UI is far cleaner and drastically reduces the cognitive load for customers who’re struggling to understand the idea of templates within the first place.

Id and homepage configuration choices haven’t discovered a spot within the website editor but. Koster proposed bringing them into the editor in a similar way to the way it was beforehand offered within the Customizer, with reside previews.

Koster additionally proposes organizing options like templates, template components, reusable blocks, and patterns in a “Design Library” part, offered through a grid of thumbnails that may open the edit view. This might convey a brand new degree of group to a set of instruments which are at present scattered all through the location editor interface.

These are only a few highlights from his explorations. Though Koster articulates lots of the Web site Editor’s present ache factors, his designs current a chic resolution for every. Take a look at the full post to see all of the movies and different concepts for organizing options within the website editor.

The disparity between the present expertise and Koster’s mockups is sort of a night time and day Cinderella type transformation. It’s a robust instance of how considerate design can actually resolve issues. His explorations acquired optimistic suggestions from these wanting to see these designs applied in Gutenberg. Koster stated his subsequent step is to arrange some less complicated prototypes for collaboration on GitHub.

“The concepts are nonetheless formative, however with some pruning we are able to get issues right into a shippable state,” Koster stated. “My subsequent step is to refine and prototype a extra stripped-back model, and take that to GitHub for wider ideas and suggestions.”