shaunandrews 3:22 pm on August 21, 2013
Tags: core plugins ( 6 ), widgets ( 15 )

Widgets, Aug 19 Chat Notes

We had our first meeting on Monday. If you were unable to attend, please check out the IRC logs.

Here’s a few key points from the chat:

RichardTape will do some data analysis on the 177 responses we received to our initial survey. (He’s finished: http://richardtape.wordpress.com/2013/08/20/results-from-widget-survey-2013/)
shaunandrews ran a user test with the simple task of adding a text widget to a sidebar: https://shaunandrews.files.wordpress.com/2013/08/themes-and-widgets-take-1.mp4 (widget stuff starts around 9:20)
Almost everyone agreed that drag-and-drag fails miserably when there are more than a 2-3 sidebars.
There’s a disconnect between the sidebars in wp-admin, and the way those sidebars are presented in a theme.
lonchbox breaks the concept of a 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. down into peices: 1) Placement 2) Settings 3) User roles (maybe?)
Don’t forget about inactive widgets!

There was some general discussion about new 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.’s for managing widgets:

Integration with the customizer for selecting and placing widgets. (melchoyce’s mockups: http://cl.ly/image/383v0l341J3w)
Media-like modal for browsing and sleeking widgets. (shaunandrews’ mockups: http://www.shaunandrews.com/wp-content/uploads/2013/08/Mockup-Widgets-Modal.png)
The Blogger model: http://s.hyhs.me/QtzH

Then, I mentioned a crazy idea.

“Sidebars” is a terrible name for the place that widgets live. “Widget Area” is a little better. But, what if we called it a “Content Area”. Then widgets (which is a pretty terrible name, too) could become “Content Blocks.” Sound familiar? The CEUX team is working on exactly that — blocks of content that can be dropped into a post or page. My crazy idea is that this same model could apply to widgets. Hell, maybe widgets become content blocks. A big advantage to this is that we have one less construct which users must learn. Instead of learning how to use content blocks AND widgets — you’d just learn how to use content blocks. I said it was crazy. I’d really love some input on this — what do you think?

Next Week

Review services/apps/sites which offer similar concepts as widgets. How do they do things, and what can we learn from them? If your interested in helping, this is a great non-technical way to do so! Find a “thing” to review, and post a comment below so we all know who’s doing what.
Run more user tests. What should we test? Any suggestions? I’m more than happy to run (and pay for) any tests we want to run — or feel free to setup your own tests (online, or in person!) and share the results.

Our next meeting is Monday Aug 26, 2013 at 20:00 UTC in #wordpress-ui. Tentative agenda includes: reviewing survey results, reviewing the services people have researched; discuss any new user tests; talk about prototypes that we can test against. I hope to see you there!

#core-plugins, #widgets

Anonymous User 5:55 pm on August 21, 2013

So crazy it’s brilliant! There’s obviously huge challenges in maintaining backwards compatibility with that approach, but it wins my support for bringing more consistency to the editing process. Since they would (presumably) be a content type, that means they also get heartbeat, auto-save and all the other benefits.

What’s the downside??
Andy Mercer 8:16 pm on August 21, 2013

In a way, I think widgets could be considered the future of WordPress. They are really the only place where existing functionality allows drag and drop content editing. However, the issue is 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. areas are defined per-theme (in fact per-template), by theme editors. They are hard-coded, and require coding knowledge to create.

If we want to merge them with content blocks, we need a fundamental re-thinking of current divide between page content and surrounding material (theme/template hardcoded stuff). I’m not sure that is really in the scope of this idea.

To the idea of 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. integration, it’s a good idea but I’m not sure it’s practical if one has a large number of widgets. Given that they’d be listed in a single column the list would grow massive. I do love the idea of doing it by template though. Maybe we could create some way for theme developers to include icons for each template, the same way as we have a large image for the theme itself?
Ryan Duff 11:43 pm on August 21, 2013

Shaun,

Is there another place that video is posted for discussion? I don’t want to muddy the waters re: widgets because that has a ton of traction, but I did notice a few ways we could improve things in the first half regarding themes. Just want to get some feedback into the right spots 😉
- shaunandrews 1:37 am on August 22, 2013
  
  Hey Ryan – see one post down: THX38 is all about themes, and shares this same video: https://make.wordpress.org/ui/2013/08/20/thx38-first-meeting-summary/
paaljoachim 9:39 am on August 22, 2013

I have this very logical idea..:) (Which I have posted up and down on the P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. a few times.)
Merge shortcodes, widgets, content blocks into one. — I’m a media teacher ok.

Create a page/post/categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. by doing it like this:
Top right template area. Select a template. Landing page, default page, etc and the layout changes.
Below Add Main Element – HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., 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., menu, content, footer.
Below Add Element (widgets, content blocks, shortcodes).

Drag elements onto the page and drop them into the table like grid, and actually make all of the page in ONE location with header and everything else in one place.
Save the page and save as template to be reused in another location.

This is how it works today:
Create a page (just some of the content. The part in the middle of the page.)
Go to header area to add a header.
Go to menu to add a menu and location.
Go to 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. area to add widgets to various areas.
These are 4 different areas to creating a page in WordPress. Heck it is like building a bicycle while keeping ones eyes closed. But after having done so a few times it becomes easier or so one hopes. After having created the page one really hopes that by clicking the preview page button that the page looks like a nice cool bicycle.

Templates. How the heck does one use templates with WordPress today? These are almost useless for anyone except a developer or someone who has used WordPress for a while. Let’s make them easy to use. Saving a page/post as a template so the user can easily reuse the layout for another page/post.

Now go and check out the mockups and the video I have created.
http://easywebdesigntutorials.com/wordpress/wordpress-mockups/
- shaunandrews 7:02 pm on August 23, 2013
  
  I think your video/mockups are a little outside the scope of our project, but shares some of the same ideas we’ve been discussing — as well as the CEUX team. Neither team is discussing updating the publishing 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.’s.
  
  Tying in templates more closely with widgets is something we should consider.
Justin Sternberg 6:47 pm on August 22, 2013

Very cool concept re: editing posts/content:

. Would be awesome to leverage this same concept for managing widgets in sidebars/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. areas via the front-end.
Avryl 10:23 pm on August 22, 2013

I love this crazy idea!
It’d be great if adding a custom content 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. would mean that it can be added to both 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. content areas and posts/pages.
In other words, have one extendible pool of content blocks that could be added anywhere (depending on the areas it allows).
- shaunandrews 6:58 pm on August 23, 2013
  
  Yup, thats the idea. One 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. to add any type of content anywhere, including posts and pages.
shaunandrews 6:59 pm on August 23, 2013

@melchoyce shared Jimdo, which shares this concept of having a single 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. for adding all kinds of content to your site: http://www.jimdo.com/tour/elements/
shaunandrews 8:02 pm on August 23, 2013

Here’s a second user test around widgets, adding more than one 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., and using the other sidebars (which only appear on the homepage template):

[wpvideo CLMpUDuq]
Helen Hou-Sandi 8:08 pm on August 23, 2013

I tried my hand at sketching what a real-time-preview-via-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. plus Blogger style adding mashup could look like: http://s.hyhs.me/Qzzz

There are tons of “what if” implementation-oriented questions scrawled below, but conceptually it could be viable, especially if we think about the possible context of widgets just being another kind of content area/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..
PeterRKnight 12:26 am on September 14, 2013

I think the thoughts around the ‘crazy idea’ are spot on. I hope this team and the CEUX team compare notes to see how the current evolution with the respective UIs may allow for converging in the future. Being able to drop in widgets into a post or page would be fantastic.

I also think 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. areas and templates don’t need to fully wedded to each other. The template would determine the physical space a widget area occupies in a layout, i.e. its general shape and location. That information could be displayed visually like has been done in some of the mockups with icons. A theme author would be able to register these locations. Widget areas themselves could be pinned to any location, but are named for their context rather than their location – much the same as what is possible using the menu system. The blog widget group would be pinned to the blog 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., to give an example.

If all of this could be done in the page editor for page specific layouts and even better, on the front end…well that would be heaven…