shaunandrews 4:59 pm on September 9, 2013
Tags: widgets ( 15 )

Widgets Chat Today

Hi everyone — I’ll be in the middle of some in-person user testing today, and won’t be available for our chat this afternoon. Please feel free to meet without me, and I can catch up via the logs. I’ll be testing the tabbed prototype today, along with the existing widgets 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.. If you can’t (or don’t want to) make it to IRC this afternoon, please leave any notes you have as a comment below. I’d love to hear how things are coming along with the other prototypes. Thanks!

#widgets

shaunandrews 2:01 pm on September 11, 2013

Here’s the results of Monday’s user test with Ben Giordano. Lots of great insight and feedback about the tabbed prototype:

[wpvideo TabcHK5P]

One of the biggest take-aways is the use of the modal. Ben found it extremely annoying. He didn’t like the fact that it hid the 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 that he was working on — he also showed one of his common use cases with widgets: copy/pasting the contents between widgets in different areas. This isn’t very easy to do with the current tabbed interface.

Based on Ben’s feedback, I’ve updated the tabbed prototype. I’ve added a list of available widgets to the right of the current widget area, replacing the modal. This feels a lot better:

[wpvideo K0Sd3mj5]
- Matt McLaughlin 3:20 pm on September 11, 2013
  
  The fact that he’s trying to copy a filled in 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. got me thinking… There’s really two distinct things on the current widget page – widget templates (widgets with no content in them) and widget documents (widgets that have been given a title and some content). For lack of a better paradigm I’m falling back on the template/document distinction since it’s common and understood from word processing.
  
  All of the “Available Widgets” are actually templates. Widgets in a 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. or the inactive widgets area are actually documents.
  
  What if we make the distinction explicit? What if we simply combine the list of available templates with the list of available documents and mark the distinction through color and/or titling.
  
  https://mattnamclaughlin.files.wordpress.com/2013/09/widget-templates.png
  
  Then rather than have to copy the contents of a widget into another instance of that template, you can simply drag the widget document to mulitple widget areas.
- Matt McLaughlin 3:33 pm on September 11, 2013
  
  I continue to be concerned that the wireframes and design direction seems aimed at sites with an extremely limited number of 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. The main site I manage is a multi-user community site that has over 40 sidebars. I’d really love to see some strategic design consideration aimed at sites like that.
  - shaunandrews 3:12 am on September 12, 2013
    
    We haven’t decided on any direction yet, and I haven’t forgotten about sites with more than a few sidebars. That being said, the tabbed prototype would have no problem expanding the list of sidebars to 10 or 15 — 20+ sidebars would be a little unwieldy, but I think that’d be the case for any design.
- Weston Ruter 11:09 pm on September 16, 2013
  
  Hi everyone. I’m new here, and was just invited to the party (thanks @helen). I remember seeing the Widgets 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. Refresh being one of the Features as Plugins projects, but I forgot about it when I had the revelation that the Theme 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. could be easily leveraged to preview changes to widgets, which currently have to be edited blind. After a hackathon 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 was born (also on GitHub). It’s remarkably small, as all the pieces were there in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. already, but they just had to be connected together. It works quite well right now, but we’ve got lots of ideas for making it even better. I’ll reference those issues below.
  
  I’m increasingly of the opinion that if some change cannot be previewed in WordPress, then the change is dangerous, and users will be discouraged from playing and experimenting because they could blow up their site—for example, placing 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. that is not compatible with a certain 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. area, or changing some text in a widget instance only to find that it breaks the layout on the frontend. So as much as possible, everything should be previewable. Sorry if this is rehashing things you’ve already discussed in depth:
  
  I think widgets should be addable or removable from the Theme Customizer (see #3). It would be great if the great new widgets UI you’re working on could be embedded within in a lightbox window that appears over the entire window when using the customizer (just like when you open the media manager). Widgets could then be dragged into the relevant customizer sections in the customizer panel (each sidebar could have its own section), and the preview window could then update to show the user what the site looks like with that widget added.
  
  The widgets in the sidebar customizer sections could also be re-ordered simply by dragging the customizer controls up or down (see #1).
  
  Is this the canonical repo on 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/ for contributing? https://github.com/shaunandrews/widgets-widgets-widgets
  
  Excited to contribute!
  - shaunandrews 12:30 am on September 17, 2013
    
    Glad to have you on board!
    
    If you haven’t already, you can catch up on the project by reading our past updates: https://make.wordpress.org/ui/tag/widgets/
    
    I’ve checked out your 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, and it fits perfectly with one (out four) of the prototypes we’re building. I’m really digging the direction you’ve described, and would love to work with you to get it ready for some user testing. Lets connect sometime this week; I’m on skype (shaun.andrews) and usually in IRC (all the time) as shaunandrews.
    
    Is this the canonical repo on 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/ for contributing? https://github.com/shaunandrews/widgets-widgets-widgets
    
    This is the tabbed prototype, one of four: tabbed, 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., menu-like, and front-end. Your more than welcome to contribute to any and all prototypes. We (like more plugin-as-features teams) are lacking developers, so it’d be very helpful to have you (and the rest of your team) available to get things out the door.
    - Weston Ruter 6:32 am on September 18, 2013
      
      Thanks. I’ve invited you on Skype. Which of the prototypes fits perfectly with the 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. 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.? I assume that is the Customizer prototype that @richardtape is heading up? Is there a repo for that? If not, I’d happily volunteer 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 to serve as the base for the Customizer prototype, and to use the 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/ repo and WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ plugin for collaboration and distribution.
      - shaunandrews 2:10 pm on September 18, 2013
        
        Yup, the 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 is what I was referring to — having your 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 the basis would be lovely! Thanks!
        
        I hope you can make our weekly chats in #wordpress-ui on 20:00 UTC. I’ve added you on Skype, and added you to our group chat.
      - Richard Tape 4:10 pm on September 18, 2013
        
        Welcome, Weston. I played around with your 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 last night and it’s just going to work significantly better for user-testing than my static prototype ever would. I strongly suggest we move ahead in that direction.
shaunandrews 4:08 am on September 12, 2013

Ran another user test on the modal-less tabbed prototype. Things went very well: (beware the loud cough at the beginning)

[wpvideo LxDbNbEd]

The want to drag widgets into place is thoroughly engrained, it seems.
- PeterRKnight 12:01 am on September 14, 2013
  
  Very interesting. I think drag and drop doesn’t give a great user experience in all situations (mobile, small screens, with lousy trackpads/mice) but it’s not as bad when you don’t have to do too much gymnastics to perform, like reordering collapsed widgets here. I actually like the workflow in this prototype.

Comments are closed.

The Design Team provides design for the WordPress project.

More information

Widgets Chat Today

The Design Team provides design for the WordPress project.

More information

Share this: