Design meeting notes for April 24, 2019

You can read the full transcript of this meeting on our Slack channel. You can also read the agenda for this week.

Updates

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ phase 2

@mapk just posted a proposal for Widgets-to-blocks UX flow on make/design.

WordPress 5.2 – About page

It’s that time of a release when the about page is thought about. If you’d love to get involved, @melchoyce has already boosted us by adding a lot of the past work to Figma. Feedback on the ticket is most welcome.

Feedback

Is your admin email still correct?

@boemedia created a prototype/user flow for a new screen in the login process, where WordPress validates the general admin email as entered in the settings page. She’d love some design/UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. feedback on the prototype. Please read her comment on the ticket and check out the link to the prototype.

Proposal: simplify WordPress Admin Navigation

@lessbloat created a proposal for simplifying the WordPress Admin Navigation. You can check out his early explorations on Trac and give feedback on the ticket. Next steps will be to iterate based on feedback and pull together a working proof of concept pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party for people to test.

#meeting-notes

WordCamp US 2018 design contribution day summary

Last weekend at WCUS the design team ran a workshop based session. The focus was around blocks. @joshuawold was co-lead with myself leading and @melchoyce, @kjellr, @lessbloat also took groups to work with.

The day was loosely planned out as:

  • Introduction
  • Sketch yourself on post-it and share.
  • Get everyone on 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/..
  • Interactive session: ‘Keep, set on Fire and Add’. Pick up to 3 things for each section within WordPress.
  • Information about what the design team does shared in Slack.
  • “Thinking in blocks”: pick up to 3 existing sites and break into blocks. Add to InVision.
  • 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. focus”: pick a block to begin designing from ones identified before.
  • Choose your own adventure: after lunch we had a few options that people could do. Votes ended up falling on 2 options:
    • Triage: run in Slack for an hour to show how it happens, thank you to those that joined remote.
    • Continue designing blocks and thinking about them.

Follow along

During the day everyone’s work was put into various InVision boards and Figma:

You can also follow along the Slack archive of the day as lots of great discussion took place.

@joshuawold has a post coming up about the navigation block work done and there will also be one on the ‘Keep, set on Fire and Add’ session.

#contribution-day #wcus

A Better “Page on Front” Experience: Previous Ideas

A problem that’s plagued WordPress for years is the confusion and ambiguity around setting your “front page.” The addition of making new pages in #38164 was a big jump forward, but there’s still work we can do to make this a better experience for people setting up their sites.

Here’s what it looks like now:

CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.

wp-admin

Let’s try to tackle this issue again in 4.9 and see if we can at least make some incremental improvements.

To start us off, let’s use this post to take a look at some of the ideas proposed in the original ticket and chat them:

Continue reading

#page-on-front

Image Flow Update 29th October: WCSF Progress report

We’ve had another productive day in San Francisco – thanks to all who have been assisting. @sonjanyc @mor10 and I took some initial feedback from @mel and @lessbloat regarding the rough sketches and moved into Balsamiq to make some example flows based on specific scenarios.

We met with @markjaquith, @ericlewis and the remote team (thanks to all who could make it!) this morning to walk through the flows and get some feedback on whether the major build effort required by our approach is worth the possibilities presented by the vision. The consensus was that while there are many details to get right, this is a BIG task worth pursuing.

Later in the day, after we refined the Balsamiq flows more completely, we met again with @dhshredder, @lessbloat, @filletto, @samuelsidler to walk through the flows based on each scenario. There were some specific notes and details that were discussed at length, but the overall feeling was that this should move forward.

The next steps for the team are:

  • create wireframes for in the browser
  • spec the flows to solve for the following scenarios

** add a single image (new image)
** add a gallery
** add and edit an existing image

  • begin githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ project for flat HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites./CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site./javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. prototype
  • build prototype!

The flows can be accessed here:

https://wordpress.mybalsamiq.com/projects/imageflowmobilefirst/grid

You should even be able to play with prototype, though I am totally unclear on what the Balsamiq sharing experience is.

#image-flow

Feature Plugin: Improving Image Editing

Image editing in WordPress isn’t fun. It’s possible, but it isn’t fun. Bringing image editing into the media modal was pretty awesome. Now people can edit images from the modal (yay!) but they also realise how frustrating that image editing experience is (boo 🙁 ).

WordPress is not an image editing platform, but we do offer some minimal image editing tools and, since they’re there, they should be intuitive instead of anger inducing.

Image editing is an area that’s ripe for improvement, so we are proposing an image editing feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. to see how we can improve things.

At the 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. Seattle 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/., myself, @sonjanyc, @mor10 and @DH-Shredder started some discussions about how we can improve the image editing experience in WordPress. Below is what we discussed:

What we want to provide to users

  • a set of simple image editing tools that just work (crop, rotate, scale)
  • image editing tools that integrate better with image uploading workflows
  • image editing tools that are easy to access
  • an interface that is extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software. so that pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers can create advanced image editing which can be easy integrated

Process
We discussed the process for the way forward with the project:
1. Creating personas and workflows
2. Conducting interviews with user types (photoblogger, food blogger, tutorial writer, multi-author blog editor, etc)
3. Looking at how other platforms provide image editing functionality
4. UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. mockups
5. Design
6. Coding
7. Testing

Tickets related to image editing

And here are some mockups that were done around 3.5 from @lessbloat

If anyone would like to be involved in this project, please let us know. We have a Skype group and we can start kicking off weekly meetings, either in IRC or Google Hangouts. It’s in the very early stages and we’re planning to take things slowly since we all have other commitments, but we can get things moving more quickly if with more involvement.

Here are some things you could help out with:

  • conducting user interviews and writing up the research
  • researching other platforms, writing it up, providing screenshots
  • mocking up workflows
  • mocking up the UI
  • designing the interface
  • coding like a boss
  • coding like a backbone boss
  • user testing
  • feedback, insight, rants, cheerleading

You can email me to be added to the Skype group or let us know in the comments

#feature-plugins, #image-editing, #image-flow

Widgets Sept 23 Chat Notes

We had our weekly chat yesterday. If you weren’t there, you can always check out those cool log things.

A few highlights:

  • We adopted the Widget Customizer pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party as our customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. prototype
  • I tossed out the idea of a “mission control” view for the tabbed prototype, which would let you see all your sidebars at once. The goal with this is to make it easier to move (and maybe copy) widgets between sidebars. Check out the video of this concept in action.
  • We pondered the question “Can the tabbed prototype and the customizer prototype coexist?” Turns out every one seems to agree that both interfaces can coexist. The tabbed prototype lends itself to more advanced functionality with lots of widgets, while the customizer plugin makes it super simple to edit (and perhaps add) widgets to the areas that are currently visible in the preview.
  • I brought up the idea of a way to preview widgets from the tabbed prototype. Turns out this is difficult (and maybe impossible) to accomplish since we won’t know what page the 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. lives on, or if it even exists. I’d love to find a way to make this possible.
  • Weston got his temporary hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. included in 25580 — yay! This opens up a lot of possibilities for the customizer plugin.
  • We discussed a few ideas for how to add widgets from the customizer. I whipped up a quick sketch showing an extension to the customizer bar.
  • We discussed cleaning up the list of available widgets. The tabbed prototype has renamed a few widgets, and removed the descriptions.
  • Weston brought up the idea of preview thumbnails for widgets. The thumbnails would show a preview of how that widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. would look in the current theme. This would require that all widgets have some “dummy” content. Perhaps we could extend this to existing widgets, as well. Having a preview of each widget in the tabbed prototype may help solidify the connection to their location on the front-end. Super cool idea.
  • We discussed the menu-like prototype briefly. I’ve chatted with jtsternburg about his progress. He and his his wife recently welcomed their third child (and future blogger) into the world — congrats! As his time is limited, he’s unable to continue work on the menu-like prototype. He’ll be sharing his code soon, so we can pick it up and get it to a testable stage.

Our next steps:

  • Continued work on the customizer plugin, and lots more user testing.
  • Connect with the front-end team to see how we can collaborate with widget editing.
  • Pickup the menu-like prototype and get it to a testable stage.
  • Follow @lessbloat‘s lead and create a planning spreadsheet to help define tasks and roles.

I’ll be out of town next week. While I encourage everyone to meet in IRC, our next official meeting will be in two weeks on October 7th, 2013 @ 20:00 UTC.

#widgets

@saracannon has posted her take on a new…

@saracannon has posted her take on a new direction for post format UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., addressing some of the concerns that surfaced after @lessbloat‘s tests. Re-thinking WordPress Post Format UI.

The one that is closest to what I was thinking, and the best balance between showing the new UI (to people who are already using post formats or who have a theme with special support), and getting it out of the way once you’ve chosen, is the “In Page decision with post editor greyed out” one.

post-formats-classic-i-copy-1024x698

I’m curious to know what the UI team thinks. I’d like action taken on this ASAP, so that we can get the UI settled for betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2.

#post-format-ui

Have made it through the second round of…

Have made it through the second round of user testing videos for post formats (thanks, @lessbloat). These were on coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. as-is, using Twenty Twelve as the theme. Should have switched to San Kloud to enable all formats, but it actually may not have made much of a difference for these. There’s a third round still to watch and annotate.

Tasks:

  1. Login
  2. Look at the Dashboard and get to add post from toolbar
  3. Add a (standard) blog post with title and text
  4. Preview your blog
  5. Add an image blog post, with image from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org
  6. Add a video post, with YouTube video URL provided
  7. Add a link blog post
  8. Add a quote blog post
  9. Add a gallery post
  10. Preview your blog again to see all the posts

Test 1: http://wpusertesting.com/videos/DC7-3.mp4

  1. Fine
  2. Fine
  3. Takes a moment finding the Publish button, but otherwise fine.
  4. Fine
  5. Notices it says nothing about a title; adds one anyway. Uses Add Media -> Insert from URL.
  6. Again goes to Add Media -> Insert from URL. Inserts the video, which gets linked. Doesn’t work for oEmbed to have it linked 🙁 Again adds a title herself
  7. Again goes to Add Media -> Insert from URL, but says she doesn’t think she’s doing it right. Tries to click the link that’s inserted in the editor to check if it goes to the right place.
  8. Corrects then to than 😀 Adds it as plain text in the editor.
  9. Add Media -> Media Library (woo!) Selects the three images using multi-select and inserts them all into the post.
  10. Checks the sesamestreet.org link, which works. Then she closes the tab, so it’s over before getting to see some things like video.

Overall observations:

  • She never once noticed the post formats metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. or wondered why the instructions were telling her to write blog posts of various kinds.
  • Not having a title bothered her a bit, perhaps because it looks so important/required.
  • The media modal certainly seems usable/comfortable, as she kept returning to it and was really quite handy with it.

Test 2: http://wpusertesting.com/videos/DC7-4.mp4

  1. A little copy paste mishap, but otherwise fine
  2. Fine
  3. Scrolls to look for the Publish button, then has to digest the whole Publish metabox to find the button. After publish, does not expect to stay on the edit screen, because she’s “done” / ready to move on.
  4. Fine
  5. Opens the URL and drags the images over to the other tab directly and drops into TinyMCE. Observes that more and more things on the computer support drag and drop, so it’s a familiar mechanism.
  6. Looks immediately for embed code. Copies and pastes code into the Visual editor; observes that it doesn’t show her what it will look like. Says that she would preview the post, but the test doesn’t say to do so, so she doesn’t. Wonders if there’s another way to embed; finds the format metabox. Selects “Link” and updates. Notes that changing and updating doesn’t seem to make anything look different. Wonders what it’s for – maybe a layout, but doesn’t make a difference to her.
  7. Remembers the format she discovered in the last task and selects it. Notes she wants selecting a format to come before adding information (not sure if flow or layout wise); because it’s under Publish she doesn’t notice it, and considers anything under there to be of use after publishing. Says she always previews/checks posts for formatting on her own blog 🙂 Wonder what she uses…
  8. Selects format – “What is the difference here, exactly?” Is really expecting the editor area to change with selecting a format; wonders what the value even is.
  9. Selects Image format, presumably because Gallery isn’t available in Twenty Twelve. Looks around and eventually finds “Add Media”. Figures out to use shift to do a multiselect. Inserts them all; wonders if she did something wrong but notices that it’s formatted/shows images in the editor. Now wonders if Add Media should have been used for embedding the video to get a nice formatted view.
  10. Notices the “Link” flag on that post, but it doesn’t seem otherwise formatted. Considers lack of formatting in various posts to be a consequence of her mistakes.

Overall observations:

  • Whenever a user thinks that it is their mistake that something didn’t make a difference or work right, we really need to look at how to fix that – to help them avoid the mistake in the first place and feel confident that they know what to do or can figure it out.
  • This could have been one of us testing such a feature. Her observations are all very astute – there’s no value in selecting a format when editing, which was further enforced by the theme display; the location on the screen is counter-intuitive to workflow; oEmbed is buried/not discoverable (and not just by WP); creating galleries as opposed to batch insertion is not something naturally thought about; and “Add Media” quickly becomes a familiar place to do more than insert images or upload files.

#3-6, #post-formats

Coming soon: Weekly updates

Part of the duties of a team repTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. for each area of contributors is to be responsible for a weekly update on the group. At this moment, there is not an established UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. team rep, but as a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development team representative, I’m happy to step in until new elections are done sometime in the near-ish future.

Part of our UI group discussion at the Community Summit was about how we can make these weekly updates both informational and effective, especially when it comes to attracting and retaining contributors. Here’s what we’re thinking:

  • A breakdown of what we did this week, such as discussions held (with links to IRC as applicable), patches uploaded/worked on, and what’s changed in core in a more prose-y manner.
  • Links to ideas from the community at large, which would likely be blog posts on other sites, including your own. Discussion would be encouraged over on those posts rather than here – the creator should be able to really take ownership and pride in their idea and be centrally involved in the discussion. The idea is to both expose some of the great ideas that are happening and open up a platform for idea generation that isn’t “from the top” or carrying the official weight that gets associated with a post on the Make P2s, which are largely status-driven rather than hypothetical.
  • Weekly IRC chat summary with anything not covered above.
  • What needs to get done this week, including any assignments that have been made and ones that need volunteers. We’re thinking this will be a great step toward exposing more ways to get involved in case you’re still figuring things out.

Thoughts? Love it, hate it?

Wow loving the feedback that came in about…

Wow, loving the feedback that came in about the welcome screen. Thanks everyone!

I’ve got another design challenge for ya. What (if anything) can be done for the “add new” buttons?

They don’t really look like buttons to me. I tried simply adding the new default button style, but I wasn’t a fan. Thoughts on how these could be improved?

Mockups welcome… 🙂