Design Share #54 (Apr 8-Apr 26)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

Continue reading

#design, #design-share

The new grid experience, feedback needed

@saxonafletcher has recently shared in Slack #design the work being done in the grid. Below are his comments as he needs design input to proceed.

Need some collective design input in regards to the new grid experience, specifically the manual mode which lets you set number of columns and rows.

Grid items can be placed in either a manual position (e.g. column 1 and row 2) or an auto position that adapts depending on what else is in the grid (e.g. pushed further down if new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is added before).

The current experience attempts to handle both these by using a “pin” action which you can think of as “locking in place”. It means that it will never move even if more items are placed before it. It also means you can create overlapping items.

One of the goals of this work is to create a more intuitive layout experience that just feels natural and is fun. Think drawing on paper. However, we also don’t want to lose the benefits that grid provide when it comes to how items adapt as the grid grows.

Ideally this can all be done on canvas vs having to set col and row start in inspector.

We are working towards:

  • Creating grid items via clicking or dragging empty cells
  • Dragging between grid cells removes col and row start and just changes the order of the grid items
  • Dragging on a cell/s adds col and row start (pins)

The PR is here if you want to play.

A few options:

  • In manual mode, all grid items have a set position by default
  • When creating/editing the grid parent, we let you create areas that you can add blocks to, this would be on top of the normal grid
  • Try a different sort of approach to the pin e.g. “position: manual” like examples attached

Could we indicate whether an item has a set position or not purely on canvas? I really want us to nail this experience and have the most intuitive layout tool around without sacrificing structure. 

Leave your comments, recommendations and questions below.

#design

Design Share: Mar 11-Mar 22

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

Continue reading

#design, #design-share

Design Share: Jan 29-Feb 9

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

Continue reading

#design, #design-share

WordCamp Zaragoza 2024. Design table in Contributor day

Last week, WordCamp Zaragoza celebrated its 2024 edition on January 19th and 20th. This annual event is always a highlight for the community, and despite the snow and well-known wind, people came to the venue willing to participate.

The event started with the Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/., a day-long session where attendees from various backgrounds come together to discuss and build WordPress in tables for each community team.

This year, the design table was expertly led by Ana Cirujano, who walked us through the new Events section asking for feedback and thoughts, as requested by Rocio Valdivia on WP España SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. This new design was released when State of the Word 2023 took place and plays a crucial role in providing information about all worldwide events and facilitating the organization of new ones. The project outlines an ambitious future, and sessions like this are key to its flourishing.

During the day, participants shared thoughts and ideas for the new design to keep improving it. From first-time users to experienced event organizers and attendees, we gathered a wide range of perspectives. Seeing how each person’s unique experiences understand the site section and provide a fresh approach was deeply inspiring.

To consolidate all the valuable feedback we received, we created a public Figjam board with the notes written in Spanish. This allowed us to organize the inputs and identify content groups visually. By doing so, we can continue refining and enhancing the section based on these shared insights. Here are the findings pulled out from the board.

Findings

Site in general

  • The site is highly user-friendly.
  • Will meetup.com events be removed? This would be an ill-advised decision as it serves as a valuable connection point to WordPress for those unaware of community events.
  • A user might be searching for “web design events.”
  • Include links to Learn WordPress and WordPress.tv (and vice versa).

Homepage

Homepage Hero

  • Regarding the hero title copy: “I don’t want to meet the community, I want to attend an event.”
  • Many users may not be familiar with the concept “community”. Consider providing more context.
  • Statistics (data on events this year, countries, or participants) seem out of place. Consider relocating them and providing additional information.
  • The hero lacks a bit of marketing storytelling. Consider enhancing it with more storytelling elements.
  • Images of people humanize the first impression, conveying that these are events happening worldwide.
  • A clearer call to action is needed.
  • Context is lacking; consider adding a landing page explaining what Meetups and WordCamps are before users reach this page.
  • Consider adding a page that describes what Meetups or WordCamps are, along with other relevant events.

Map

  • There is agreement on displaying the map, providing insights into the scale and geographic distribution of WordPress events.
  • The map zoom is not centered on Zaragoza (the current city) and leaves out certain geographic locations. Testing from Nigeria with a VPN revealed the map zoom remains the same, indicating a lack of geolocation. It should center on the user’s location and feature a greater zoom out for a comprehensive view.
  • Address the invisibility of events in certain regions such as South America, Africa, and Asia on the map, as it is a promotional space for events.
  • Consider adding event images to the tooltip on the map when clicking on an event.
  • Consider designing icons for different event types, recognizing the challenge in symbolizing certain types graphically.
  • Evaluate the use of Google Maps and consider an open-source alternative like OpenStreetMap.
  • “The map is not for finding events; it’s for navigating.”
  • When an event has started, the tooltip on the map disappears. Consider including not only the start date but also the end date.

Filters

  • Filters, though crucial, lack visibility. Consider treating them similar to filters and search functionalities on travel websites.
  • Introduce the functionality of “Sort by location proximity.”
  • Initially considered placing the “Country” 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. first, but later, the “Online event or in-person event” filter is deemed more critical. Prioritize filters based on importance.
  • The popover for filters, such as “Country,” does not work when typing, and there is no search functionality. Consider improving this for a smoother user experience.
  • Filter selectors may exclude months or countries with no events to prevent users from seeing a “No events found” result.
  • If users select months or locations without events, the empty state of the search or filter should encourage them to host their own event.
  • Consider displaying the option to organize an event when there are no events nearby. This information could be consistently visible, emphasizing that anyone can host a WordPress event.

Events Table

  • The data in the table does not align with the filters.
  • Distinguish between online and in-person events in the events table. This is considered more important than location. Prioritize the filter for online or in-person events first, followed by location.

All the invaluable feedback was kindly shared by the following participants: acirujano, kikeupdate, xavinaval, paudegrafreak, ladylanding, Helena de la Joya, fernandoaureonet, adriandegrafreak, and martatorre. And double kudos to Ana for writing down the findings and co-write this post.

Stay tuned for updates on the progress we make in improving the Events section by following the #website channel on Slack and this blog.

#events #community-team

Design Share: Jan 15-Jan 26

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

Continue reading

#design, #design-share

Design Share: Jan 1-Jan 12

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

Continue reading

#design, #design-share

Design Share: Nov 20-Dec 1

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

Continue reading

#design, #design-share

Design Share: Oct 23-Nov 3

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

Continue reading

#design, #design-share

Bringing Back the Weekly Design Triage

In order to review and move older tickets, I plan to host a few Design specific triage sessions. As of now there are a total of 136 trac tickets labelled as ‘needs design‘. Our plan is to go through the tickets giving priority to the oldest tickets, confirming their validity and moving them to proper team. I will be facilitating this session weekly on Tuesdays at 3 PM UTC in the Make WordPress Design Channel.

It would be a good idea to go through the following focuses before the session to make best use of the time:

We are also in need to volunteers to help with the Triage sessions. If you are interested to contribute to the Design Team then please comment below or direct message @chaion07. Thank you!

#bug-scrub