Title: What makes a great customization experience? Author: Mel Choyce-Dwan Published: January 13, 2017 --- [ ](https://profiles.wordpress.org/melchoyce/) [Mel Choyce-Dwan](https://profiles.wordpress.org/melchoyce/) 5:26 pm _on_ January 13, 2017   # What makes a great customization experience? Customization is [one of the core focuses for 2017](https://make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/). We’ll be focusing on creating a [great editing experience](https://make.wordpress.org/design/2017/01/11/what-makes-a-great-editor/) first, and then we’ll be extending that experience to encompass site building and customization. There’s a lot of work we can do to improve customization in WordPress leading up to the convergence with editing. What do you think makes a great site building and customization experience? Outside of WordPress, what are your favorite tools and services for making sites? What makes them great? Conversely, what are some of the biggest pain points you see within our existing customization experience? If you’re interested in working on customization, please join us in SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/) in [#core-customize](https://wordpress.slack.com/messages/core-customize/). The next meeting will be [Monday, January 16, 2017, 1:00 PM EST](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20170116T1800). Looking forward to kicking of 2017! ### Share this: * [ Threads ](https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/?share=facebook) * [ X ](https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/?share=x) * [ Reddit ](https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/?share=reddit) * [ Email ](https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/?subject=%5BShared%20Post%5D%20What%20makes%20a%20great%20customization%20experience%3F&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2017%2F01%2F13%2Fwhat-makes-a-great-customization-experience%2F&share=email) 1. ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) 2. [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 5:29 pm _on_ January 13, 2017 3. Squarespace and Weebly both have a really great site building experience. Squarespace is super polished, and Weebly is incredibly intuitive. They both have a visual, 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.- based system of site building. Weebly has really great page templates, that are pre-made configurations of blocks designed to suit specific use-cases, like an About or Contact page. It makes it really easy to get something up fast. Squarespace’s design tools make it easy to build something really beautiful. It’s hard to make a bad Squarespace site. 🙂 4. In my opinion, one of the biggest issues with our current site building flow is the need to jump in and out of different tools and modes — especially needing to jump in and out of 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. to add content to pages. I can’t preview page template changes, so I don’t know what my page will look like until I publish the page and then view it. There’s no way to easily move or rearrange elements around on the page, unless the theme I’m using has a ton of widgets — and even then, I can only move that content to other 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. Templates are static, not dynamic. Without using a 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party., I can’t make a page show a list of my latest posts, or projects from a portfolio CPT. I can’t sit in one spot and visually build my site. There’s a lot that still gets abstracted out of the process of site building that makes it long, arduous, and frustrating. 5. * ![](https://secure.gravatar.com/avatar/63b496ec3806485229b4f934b26643dad6e734ca6e6ef7b38c846205b01cd37f? s=32&d=mm&r=g) * [Weston Ruter](https://profiles.wordpress.org/westonruter/) 12:12 am _on_ January 14, 2017 * > In my opinion, one of the biggest issues with our current site building flow > is the need to jump in and out of different tools and modes — especially > needing to jump in and out of 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. to add content to pages. I can’t > preview page template changes, so I don’t know what my page will look like > until I publish the page and then view it. There’s no way to easily move > or rearrange elements around on the page, unless the theme I’m using has > a ton of widgets — and even then, I can only move that content to other 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. * Agreed. To reference prototype work being done in feature plugins related to these issues (at the risk of sounding like a broken record and putting the cart before the horse): - The [Customize Posts](https://wordpress.org/plugins/customize-posts/) 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. allows you to make changes to the post/page title, content, template, featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., and so on within the same interface as you customize aspects of your site outside of a post, such as nav menus and widgets. - The [Shortcake](https://wordpress.org/plugins/shortcode-ui/) plugin allows for post elements to be added to content and re-arranged. - The [JS Widgets](https://wordpress.org/plugins/js-widgets/) plugin (with a pending [PR](https://github.com/xwp/wp-js-widgets/pull/32)) allows the same widgets appearing in sidebars to also be used in post content, though you can’t currently drag a widget between post content and 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.. * These are some of the feature plugins that I want to closely evaluate this year as we consider what we incorporate into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. 6. ![](https://secure.gravatar.com/avatar/85cd797876de53531b77ed37565fcf9fd5a7bae47d5139120cec9f63d17b706b? s=32&d=mm&r=g) 7. [Luke Cavanagh](https://profiles.wordpress.org/lukecavanagh/) 6:02 pm _on_ January 13, 2017 8. Whatever anyone may think of Wix, it does have a very well designed 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., easy experience and editor. 9. Live editing would make the experience a lot easier in the changes you are making are real-time and you can see those as you are working on them. 10. ![](https://secure.gravatar.com/avatar/c5876422a37fd6194f1443154e5b8dc0920c99df2e3cc83f3d146bf34992abc5? s=32&d=mm&r=g) 11. [Mark Uraine](https://profiles.wordpress.org/mapk/) 6:54 pm _on_ January 13, 2017 12. I’ve always enjoyed [Blocs](http://blocsapp.com/). 13. **PROS** 14. * How they define global areas seems very similar to WordPress. * Their terminology of “Blocks” and “Bricks” is very understandable, and reminds me of Frost’s [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/). * The interface is fantastic. 15. **CONS** 16. * It’s not fully customizable. The user is confined to predetermined rules of structure relationships. 17. ![](https://secure.gravatar.com/avatar/f52b6c3ffc545f3408d3f25508bdda9fe9ef14f49dba69df5005d4d899a1ff53? s=32&d=mm&r=g) 18. [bemdesign](https://profiles.wordpress.org/bemdesign/) 7:59 pm _on_ January 13, 2017 19. I like how the [Tailor plugin](https://wordpress.org/plugins/tailor/) works. Great feel and flow to it. The trickiest part is figuring out how certain components work together. 20. * ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) * [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 8:31 pm _on_ January 13, 2017 * There’s a lot about Tailor that’s great. Same with Beaver Builder, another popular WordPress page builder 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party.. * When I was testing both, I noticed both seem to have some similar problems: - The biggest issue was that you can see your whole site, but you can only interact with the page content. This is frustrating, because I expect to be able to edit everything I see, not just one specific part of it. This is a problem with the idea of page building itself, and I actually think it’s less of an issue with plugins that abstract the layout into panels and metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes within the page editor itself, rather than going into a live preview mode to build. If I’m adding pieces within the non-live-preview editor, I expect to only edit that which I see: the page I’m working on. This is going to be an issue we’ll need to tackle within both the editor and customization focuses this year. cc [@joen](https://profiles.wordpress.org/joen/) - They emphasize duplication of elements. I found myself clicking it by accident a couple times, which was annoying, because I didn’t actually want to duplicate anything while I was building. Seemed like a really prominent shortcut for something I didn’t really need to do ever. - Both relied entirely on drag-and-drop and didn’t support click-to-add, which felt unfriendly. Since I was working from a mockup when I was testing both plugins, I knew what I wanted to add, and wanted to add them quickly without taxing my wrist. I think we should support both forms of adding blocks in whatever 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. system we create for both the editor and customization. * Of the two, I found Beaver Builder was able to more accurately help me replicate the [mockup I was working from](https://cloudup.com/cJWzmYQ_35g) (aside: I borrowed content from my wonderful CSA to create this mockup, I did not write it myself). The blocks had better default styling, and the options were better tailored (hah) towards what I was trying to accomplish. Tailor almost gave me too much control in a way I found more annoying than helpful, since it meant I kept having to fix things _everywhere_ rather than defining them in one place( like spacing between elements). * I had to add some custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to both to get it working the way I wanted, but I needed more CSS to get the Tailor site closer to the mockup, and it still doesn’t look as good. * That said, Tailor better matches WordPress itself, and feels native. Beaver Builder doesn’t feel like WordPress. * For reference, here’s the two sites I built: - [https://pagebuilder-tailor.mystagingwebsite.com/](https://pagebuilder-tailor.mystagingwebsite.com/) - [https://pagebuilder-beaver.mystagingwebsite.com/](https://pagebuilder-beaver.mystagingwebsite.com/) * Pippin recently did a fantastic round-up of WordPress page builders: [https://pippinsplugins.com/wordpress-page-builder-plugins-critical-review](https://pippinsplugins.com/wordpress-page-builder-plugins-critical-review) - ![](https://secure.gravatar.com/avatar/85cd797876de53531b77ed37565fcf9fd5a7bae47d5139120cec9f63d17b706b? s=32&d=mm&r=g) - [Luke Cavanagh](https://profiles.wordpress.org/lukecavanagh/) 9:53 pm _on_ January 13, 2017 - Tailor is very solid, Elementor is also very well built. - ![](https://secure.gravatar.com/avatar/f52b6c3ffc545f3408d3f25508bdda9fe9ef14f49dba69df5005d4d899a1ff53? s=32&d=mm&r=g) - [bemdesign](https://profiles.wordpress.org/bemdesign/) 9:09 pm _on_ January 14, 2017 - [@melchoyce](https://profiles.wordpress.org/melchoyce/) – great points. But we can certainly use the ideas of Tailor and Beaver Builder (and others) to help design improved user interfaces for editing content, designing page/ post layout, and even site design. - As others later in the thread point out though, there is an issue of editing context which I think will be the biggest bugbear to figure out. Editing content can have different contexts and page/post layout design is a subset of website layout design itself. - Figuring out the borders of these editing contexts and modes will be, in my opinion, the critical problem to figure out. - Perhaps the new editor will require 3 context modes: site design mode, page/ post design mode, and content editing mode. Affinity Designer uses this approach – it has 3 “personas” (modes). One for drawing vector artwork, one for creating bitmap/raster pixel artwork, and one for exporting artwork. - But if have different editing modes for the different editing contexts, we end up requiring users to decide which editing context they’re in… which is not ideal. * ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) * [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 5:24 pm _on_ January 16, 2017 * > As others later in the thread point out though, there is an issue of > editing context which I think will be the biggest bugbear to figure > out. Editing content can have different contexts and page/post layout > design is a subset of website layout design itself. > Figuring out the borders of these editing contexts and modes will be, > in my opinion, the critical problem to figure out. * Totally agree. Figuring out those edges and the overlap is going to be critical. * I like this comment from @sirbrillig on [Slack](https://wordpress.slack.com/archives/core-editor/p1484235131000637): * > I know there are different workflows, but when I am writing a post, > I generally like the (ideally distraction-free) visual editor. But > then I usually go back to add images and adjust layout and that becomes > awkward because I have to go back and forth to the preview. It would > be nice to be able to sort-of “zoom in” on a text 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. to do some writing and then “zoom out” to > adjust layout and image placement. * Zooming in/out is an interesting mental metaphor it would be worth experimenting with, either in some sort of abstract way, or explicitly. * I think it’s overall less complicated when we’re look at an editor for posts — but the second we start looking at building more dynamic pages and the rest of your site, we’re going to encounter problems if we try to map the same tools 1-1. * > Affinity Designer uses this approach * I’ll have to check it out, thanks 👍 21. ![](https://secure.gravatar.com/avatar/5829b86926e8946e34585c1937a39cb188ee38e8f34030d74d6404c972ea514e? s=32&d=mm&r=g) 22. [Paal Joachim Romdahl](https://profiles.wordpress.org/paaljoachim/) 9:58 pm _on_ January 13, 2017 23. Another site builder is [https://elementor.com/](https://elementor.com/) 24. It is kinda like a frontend 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. on steroids..:) 25. ![](https://secure.gravatar.com/avatar/5612a0b1e26e958b7cb153ad8d69325be61525b2bba4819361bb69f127ec34b4? s=32&d=mm&r=g) 26. [Mark Root-Wiley](https://profiles.wordpress.org/mrwweb/) 10:53 pm _on_ January 13, 2017 27. Some initial thoughts: 28. #1. **Good defaults.** For example, users shouldn’t be _forced_ to choose padding for every element, sensible defaults should make things look good by default. I could imagine a “theme” becoming more like a set of defaults. I’d extend this further to good “presets”—combinations of settings. 29. #2. **Clear in context & scope.** For any conditional or page-specific settings( anything not site-wide), it should be incredibly clear to what a customization option applies. For anything with live preview, when a user changes a setting, they should never be surprised by a change’s impact on a screen they’re not viewing. 30. #3. **Restrained.** While WordPress believes strongly in limiting options, I believe this is even more important with a 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 believe there is generally decreasing marginal improvement from every added customization option after a point. Further, when given too many options, I often find choosing to customize a feature has decreasing marginal improvement (even passing neutral and becoming negative). 31. * ![](https://secure.gravatar.com/avatar/0cba87f5d1614b0b60cecc64f3d836608cd944566cce6a01e446ab5e8ed86e35? s=32&d=mm&r=g) * [Joen Asmussen](https://profiles.wordpress.org/joen/) 10:07 am _on_ January 14, 2017 * > shouldn’t be forced to choose padding for every element * ❤️ * This speaks to what might be one of the bigger challenges for the customization experience: finding the right balance between options & features, and simplicity and usability. * Things like surfacing paddings and margins feels light it might step on the wrong side of that line — if you changed the padding in one place, would you have to do it one by one for every other 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. of the same type you’ve used? To put it differently, there’s probably an equilibrium to be found between what 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. will let you do, and what the theme should define. - ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) - [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 5:29 pm _on_ January 16, 2017 - FWIW this one of the biggest problems I had when I tried out Tailor, and on a more macro level, one of the biggest problems I had working with Squarespace— I’d rather define and adjust the system, not individual elements. * ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) * [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 5:28 pm _on_ January 16, 2017 * Huge +1 to all of this. * ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) * [Tammie Lister](https://profiles.wordpress.org/karmatosed/) 5:57 pm _on_ January 16, 2017 * > Good defaults. * I’d probably expand this to add: “allow themes to set” also. Good defaults is important, but also reflecting what a theme is going to do is crucial. Editor styles sort of does this but we can do better. 32. ![](https://secure.gravatar.com/avatar/5612a0b1e26e958b7cb153ad8d69325be61525b2bba4819361bb69f127ec34b4? s=32&d=mm&r=g) 33. [Mark Root-Wiley](https://profiles.wordpress.org/mrwweb/) 11:40 pm _on_ January 13, 2017 34. > We’ll be focusing on creating a great editing experience first, and then we’ll > be extending that experience to encompass site building and customization. 35. I don’t really know how other people interpret this, but I’m really hoping that“ extend” doesn’t _necessarily_ mean “merge” (which probably means front-end editing). I think the distinction between page content/layout and site design [will always remain important](http://mrwweb.com/wp-inline-access/). 36. Instead, I could hope “extend” means sharing of 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. and “content blocks.” That might look like a UI to create a two-thirds/one-third page/side layout works just as well to build a two-thirds/one-third body/aux. content layout. 37. Another good example that I’ve seen thrown around is that 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.” might become equally something that can be incorporated in a page’s content layout and the site layout. What I think is important though, is that this distinction never gets lost: 38. * Site layout / design applies to multiple pages * Page layout is page specific 39. I think even on brochure sites, that distinction is important and losing it will solve one problem and replace it with another. 40. * ![](https://secure.gravatar.com/avatar/04e4aa822cbf1a1280c77c1a45df0953110c4b82f9c420c883d5aada2cefb88e? s=32&d=mm&r=g) * [Jay Okey](https://profiles.wordpress.org/jay-okey/) 9:56 am _on_ January 14, 2017 * I whole heartedly agree with this: * > - Site layout / design applies to multiple pages > - Page layout is page specific * I wouldn’t want to see the Editor merge with 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.. Both need to be improved, but they have their different roles. * With regards to the editor I’ve been using Beaver Builder for a year and enjoy the amount of power it gives you to design individual pages. Also the ability to save templates so you don’t have to start from scratch each time. * Having said that setting site wide defaults like fonts, headers, footers and 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 to me belongs in the Customizer. The Customizer experience needs to be improve but editing an individual page is different to setting up the defaults for a theme. - ![](https://secure.gravatar.com/avatar/9dde797f13053f9cb85dfb31cb25ed83d2a99a9aeca6c501a4e7a17c87ea99be? s=32&d=mm&r=g) - [gusepoid](https://profiles.wordpress.org/gusepoid/) 5:46 pm _on_ January 14, 2017 - I agree that setting a page and a theme are different tasks, even more, I think that writing content and setting layout should be considered different tasks. Check Adobe Indesign Story Editor as reference [http://blogs.adobe.com/indesignpost/2011/06/quick-tip-using-the-story-editor-in-indesign-cs5/](http://blogs.adobe.com/indesignpost/2011/06/quick-tip-using-the-story-editor-in-indesign-cs5/) * ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) * [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 5:36 pm _on_ January 16, 2017 * Very cool, reminds me of editing restaurant menus in Squarespace: * [⌊Screen Shot 2016-01-19 at 2.24.03 PM⌉⌊Screen Shot 2016-01-19 at 2.24.03 PM⌉[ * Thanks for sharing 🙂 - ![](https://secure.gravatar.com/avatar/6a97b9fdf799797b7e29604f11d3c6ba1da31e57f4fdb9f76dba09cb052770b1? s=32&d=mm&r=g) - [Joy](https://profiles.wordpress.org/joyously/) 10:36 pm _on_ January 17, 2017 - And remember that it could be different people with those roles. Not all users should or do have the capability to change the site layout. I would even go so far as to say that site layout should be a set and forget task at the beginning and be very separate from content editing. And changing the site design should not involve going into the content. * ![](https://secure.gravatar.com/avatar/0cba87f5d1614b0b60cecc64f3d836608cd944566cce6a01e446ab5e8ed86e35? s=32&d=mm&r=g) * [Joen Asmussen](https://profiles.wordpress.org/joen/) 10:09 am _on_ January 14, 2017 * > Instead, I could hope “extend” means sharing of 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. and “content blocks.” > That might look like a UI to create a two-thirds/one-third page/side layout > works just as well to build a two-thirds/one-third body/aux. content layout. * 🌟 💫 * (I’m running out of star emoji here) * ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) * [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 5:33 pm _on_ January 16, 2017 * Yup, totally agreed here. * [@folletto](https://profiles.wordpress.org/folletto/) has a good way to think about the editor vs. 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. in terms of 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. editing — sounds like he’s putting a blog post together on the subject, so I’ll let him link to it when it’s written up. * ![](https://secure.gravatar.com/avatar/d90c229271bfd77e2082d964e37cef60b935fa3ab6682883a8407a6c086e6e4c? s=32&d=mm&r=g) * [Davide 'Folletto' Casali](https://profiles.wordpress.org/folletto/) 5:49 pm _on_ January 16, 2017 * Thanks for the pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” [@melchoyce](https://profiles.wordpress.org/melchoyce/), I published the [article about the two mental models here](http://intenseminimalism.com/2017/two-mental-models-to-design-wysiwyg-editors/). * I hope it helps. * ![](https://secure.gravatar.com/avatar/63b496ec3806485229b4f934b26643dad6e734ca6e6ef7b38c846205b01cd37f? s=32&d=mm&r=g) * [Weston Ruter](https://profiles.wordpress.org/westonruter/) 6:28 pm _on_ January 16, 2017 * Instead of “merge” I think the key is a seamless “overlap” in that there shouldn’t blockages to editing content in a template customization context, nor should there be blockages to configuring the template when editing content. It should be natural to transition between the two modes. 41. ![](https://secure.gravatar.com/avatar/6feddddd4814d87e9382d3d538e1e9256e97853d6fd77712a697a39695e0b919? s=32&d=mm&r=g) 42. [cavalierlife](https://profiles.wordpress.org/cavalierlife/) 2:11 am _on_ January 14, 2017 43. There’s a reason people keep trying to find ways to create content that is laid out in rows and columns. And yet, I never seem to hear coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. addressing this. (Maybe I have just missed those conversations, of course). But that would be the first place I would start when thinking of how to improve the editing experience. Vertical, one-column text just doesn’t cut it. 44. * ![](https://secure.gravatar.com/avatar/5829b86926e8946e34585c1937a39cb188ee38e8f34030d74d6404c972ea514e? s=32&d=mm&r=g) * [Paal Joachim Romdahl](https://profiles.wordpress.org/paaljoachim/) 10:30 pm _on_ January 14, 2017 * I have been thinking about somekind of semi transparent grid in the content area to where we can easily place our content. Here is a video I am while rethinking the content layout: (It is a few years old now and new and better ways will very likely come forth.) 45. ![](https://secure.gravatar.com/avatar/0608b540c7da83b396fd9a453ad1ac0298152522bc3a06888d41649e4024a089? s=32&d=mm&r=g) 46. [Ahmad Awais](https://profiles.wordpress.org/mrahmadawais/) 8:12 pm _on_ January 14, 2017 47. Well, this is an interesting topic, to begin with. I think the 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. 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. is holding it back. It is outdated and bulky (at least as compared to the modern tools). We can nullify the UI as much as we can — to make it look better and modern. Easy on eyes UI’s are known to have a better 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.. 48. Just my two cents. 49. ![](https://secure.gravatar.com/avatar/e05110ddfc422ecfc3c68f61f2b08a404343ef8514fed12b460fc9c9aaa47d27? s=32&d=mm&r=g) 50. [Helen Hou-Sandi](https://profiles.wordpress.org/helen/) 5:26 pm _on_ January 16, 2017 51. When I think about customizing a site, it’s inextricably tied to a theme setup experience. There are other times I end up in some kind of customization flow ( changing widgets, now CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. tweaks yay), but for the most part when I think about overall workflow and not just individual tasks it’s about either fresh site or new theme setup. That’s not to say that should be the scope by any means, just context for my own thoughts. So to me what would make for a great customization experience would be an uninterrupted flow from installation through to the point where you’re ready to call your site launched. Some of the roadblocks I can think of right now are: 52. * Where do you go upon first logging in? As of 4.7 you are auto-logged-in if you run the installer yourself, but with so many people coming in through host- provided installation solutions, we’re still hoping they notice that big blue button in the welcome panel or whatever it is hosts are doing to push their users in a certain direction. * How do you find a theme that matches what you want? I think regardless of what the technical foundation of a theme is (to say nothing of how plugins play into this), people are far more likely to choose a software or service if it directly reflects X thing they want to do, whether that’s type of business or target audience or what have you. Changing things around the actual theme finding process is a wider project that I may be interested in tackling on its own and making sure we keep an eye on where exactly that needs to intersect with “what is customization” and “what is coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.’s customization experience”. * How do you change things that can now be pre-populated (starter content) but are stuck in the limbo of being considered post content and therefore somewhere in that overlap between customization and editor? 53. * ![](https://secure.gravatar.com/avatar/e05110ddfc422ecfc3c68f61f2b08a404343ef8514fed12b460fc9c9aaa47d27? s=32&d=mm&r=g) * [Helen Hou-Sandi](https://profiles.wordpress.org/helen/) 5:33 pm _on_ January 16, 2017 * To elaborate a little more on what my opinion is on WordPress being more reflective of whatever thing it is the person wants to build out, I think it’s overwhelming to start from a blank slate and themes and other building tools should start out far more opinionated than they typically do now. Page builders that require you to insert everything yourself and tweak all the options ever are nigh-impossible to use unless you are in a very specific position of being a non-coding implementer with a lot of time to invest. - ![](https://secure.gravatar.com/avatar/85cd797876de53531b77ed37565fcf9fd5a7bae47d5139120cec9f63d17b706b? s=32&d=mm&r=g) - [Luke Cavanagh](https://profiles.wordpress.org/lukecavanagh/) 9:32 pm _on_ January 18, 2017 - I agree other site building tools do a better job at theme with starter content based on which type of site a user might want. So a user does not just hit a blank site with default theme on new install. * ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) * [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 5:38 pm _on_ January 16, 2017 * All good points we need to consider 👍 * One of the things we need to be better at focusing on in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. is _flows_ over _features_. What does the whole site setup process look like? What does it mean to commit to a theme, then decide later to switch to a new theme? - ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) - [Tammie Lister](https://profiles.wordpress.org/karmatosed/) 6:00 pm _on_ January 16, 2017 - > coreCore Core is the set of software required to run WordPress. The Core > Development Team builds WordPress. is flows over features - +so many * ![](https://secure.gravatar.com/avatar/287b89754d639241cd3b3d062be6b8cba43e18e67c80ec15b2ce550023fdbac7? s=32&d=mm&r=g) * [Ian Stewart](https://profiles.wordpress.org/iandstewart/) 5:41 pm _on_ January 16, 2017 * > Where do you go upon first logging in? * > building tools should start out far more opinionated than they typically > do now * We’ve found in some WP.com user testing that people seemed most happy if we sent them to the front-end of their site after completing the signup/install process. Where that site was all set up for them with some sample content. It naturally reduced their options to what was in the toolbar but also gave them a “finished site” ready for them to start editing. (Which can be really hard and confusing.) 54. ![](https://secure.gravatar.com/avatar/85cd797876de53531b77ed37565fcf9fd5a7bae47d5139120cec9f63d17b706b? s=32&d=mm&r=g) 55. [Luke Cavanagh](https://profiles.wordpress.org/lukecavanagh/) 6:10 pm _on_ January 17, 2017 56. So redirect to the site front-end when logged in for first time users? 57. There would have to be a way to disable redirect to home for non-first time users, since I am sure users who know WordPress would not want to be redirected to home everytime they login from wp-login.php. 58. ![](https://secure.gravatar.com/avatar/6a97b9fdf799797b7e29604f11d3c6ba1da31e57f4fdb9f76dba09cb052770b1? s=32&d=mm&r=g) 59. [Joy](https://profiles.wordpress.org/joyously/) 11:07 pm _on_ January 17, 2017 60. > what are some of the biggest pain points you see within our existing customization > experience? 61. I’ve had a couple of clients hire me to fix things on their site while making a few changes that they don’t know how to do. It is a real hassle to have to explore all of the options and plugins and widgets to determine where a piece of content comes from and where its CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is. Often the changes are theme-specific, so the client changes themes and doesn’t realize their widgets are no longer showing or their menu changed to the default menu. A recent site I fixed had a hack in a premium theme. I couldn’t just switch themes because that theme created custom post types and displayed them in certain ways. I had to redo a bunch of content before I could change themes. 62. I am still waiting for a good 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. experience. I do not like anything about it, except maybe the ability to batch a bunch of changes to go live all at once. I do not like the preview or the restriction of the 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](https://www.javascript.com/) panels on the left. I do not like how plugins and themes can put their options anywhere, mixed in with CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. options. It is very confusing for new users to determine what will change when a different theme is chosen (feedback from several clients). I always thought a new user should explore the admin first thing before installing themes or plugins to know what is Core. But then the default theme has some options mixed in there also, and there usually isn’t time for them to spend on that. 63. ![](https://secure.gravatar.com/avatar/6a97b9fdf799797b7e29604f11d3c6ba1da31e57f4fdb9f76dba09cb052770b1? s=32&d=mm&r=g) 64. [Joy](https://profiles.wordpress.org/joyously/) 11:29 pm _on_ January 17, 2017 65. I’d like to see themes evolve a bit more so that there is more generic handling of menus and widgets, and even some CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.. For instance, currently themes name their menus and widgets and CSS selectors. But if CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. defined a set of names and the theme then registers callbacks for — using functionality keywords or placement keywords — it would make switching themes less troublesome. That would include using _start_ and _end_ keywords instead of _left_ and _right_, like CSS is changing to. That makes it more language agnostic too. Then those options can be laid out in 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. and remain in the same places regardless of theme. 66. ![](https://secure.gravatar.com/avatar/5612a0b1e26e958b7cb153ad8d69325be61525b2bba4819361bb69f127ec34b4? s=32&d=mm&r=g) 67. [Mark Root-Wiley](https://profiles.wordpress.org/mrwweb/) 4:25 pm _on_ January 18, 2017 68. Some recommended readings that have greatly influenced my views on customization( in order of “if you only read one, read the first one”): 69. **[“Inline Editing and the Cost of Leaky Abstractions”](https://www.lullabot.com/articles/inline-editing-and-the-cost-of-leaky-abstractions)** 70. > The editing interfaces we offer to users send them important messages, whether > we intend it or not. They are affordances, like knobs on doors and buttons on > telephones. If the primary editing interface we present is also the visual design > seen by site visitors, we are saying: “This page is what you manage! The things > you see on it are the true form of your content.” On certain sites, that message > is true. But for many, it’s a lie: what you’re seeing is simply one view of > a more complex content element, tailored for a particular page or channel. 71. **[“WYSIWTF”](http://alistapart.com/column/wysiwtf)** 72. > The best solution isn’t to build tools that hide that complexity from the user, > that make them think that the styling they’re adding to the desktop site is > the “real” version of the content. Instead, our goal should be to communicate > the appropriate complexity of the interface, and help guide users to add the > right structure and styling. 73. **[“WYSIWTFFTWOMG”](http://www.markboulton.co.uk/journal/wysiwtfftwomg)** 74. > Instead of inline editing of the content, why not just make the start of that > journey a little easier? Why not provide a way of quickly getting to exactly > that bit of content with a link? 75. * ![](https://secure.gravatar.com/avatar/0e4b198b1a384130e239db654f966b4ad306bf05d3fa38c23700d071987f9df7? s=32&d=mm&r=g) * [gusepo](https://profiles.wordpress.org/gusepo/) 5:54 pm _on_ January 18, 2017 * I agree with the first quote, I think editing parameters can be a better option than WYSIWIG in wordpress. 76. ![](https://secure.gravatar.com/avatar/213ffa27eb35ac4a16040157d8d9d8c9a1be19971a387774a8891893215ed084? s=32&d=mm&r=g) 77. [Emil Uzelac](https://profiles.wordpress.org/emiluzelac/) 10:28 pm _on_ January 19, 2017 78. I’ve checked both Squarespace and Weebly before and they’re definitely nice, take a look at a [Page Builder](https://wordpress.org/plugins/siteorigin-panels/) as well if you haven’t already. 79. ![](https://secure.gravatar.com/avatar/c279d00cf8d7c55faab3acb6ee3a7f2eb5bb2e5e81aa73c143e627ca3902884e? s=32&d=mm&r=g) 80. [David A. Kennedy](https://profiles.wordpress.org/davidakennedy/) 11:43 pm _on_ January 19, 2017 81. > What do you think makes a great site building and customization experience? 82. **Blocks**: Free content from the “post”, “page” or “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.” as defined in WordPress. Let me arrange it however I like. 83. **Scope**: Give me the freedom to place my content however I’d like, but don’t make me do everything. I shouldn’t have to adjust padding and border colors everywhere to make an awesome site. 84. **Consistency**: The default customization experience should be consistent in all themes – whatever those become. Maybe that means restricting some of the customization ability available to themers. Just as an example – say CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. ships with 12 types of content blocks. Maybe those can be added to, but not removed. That main experience should be transferrable and understandable from theme to theme, site to site. 85. > Outside of WordPress, what are your favorite tools and services for making sites? > What makes them great? 86. I used a proprietary CMS at a past job. It had content blocks, and my favorite feature within that was template-specific and page-specific blocks. That meant I could reuse blocks in many places if I wanted or make one off blocks for specific pages. 87. > Conversely, what are some of the biggest pain points you see within our existing > customization experience? 88. A few pain points come to mind for me: 89. * 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. isn’t too bad for site customizations (headers, background color, etc.), but it starts to break down for site building (making initial site setup tweaks, laying out pages, etc.). This is because you often have to jump away to another screen in the Admin to fully complete a task. * Themes have to write a good chunk of code to make the Customizer properly preview its changes. This is understandable to a degree, but it would be great if Core came with more of that. Where more of it just worked, instead of needing to write a `customizer-preview.js` file to make it all connect. * Some theme specific things can be very jarring, and potentially new to a user, depending on the theme. Some themes have featured images, some don’t. Some use it differently. This is just one example, but it would be great if those differences from site to site could be surfaced to users in a more obvious way. Maybe that’s in the theme directory, or during a setup flow. But I’d love to have users stop ditching a theme because of one little hitch, like lack of featured images or use of excerpts. 90. * ![](https://secure.gravatar.com/avatar/44e5f9de90e55239b34adb3c6792cec54440a333ae4351d1950ab37cadbb4b94? s=32&d=mm&r=g) * [BinaryMoon](https://profiles.wordpress.org/binarymoon/) 8:10 pm _on_ January 20, 2017 * > Themes have to write a good chunk of code to make 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. properly > preview its changes * I wrote a little proposal for this a while ago – didn’t actually do anything with it though – [https://gist.github.com/BinaryMoon/67a693eff42f4317e119fe0858e55807](https://gist.github.com/BinaryMoon/67a693eff42f4317e119fe0858e55807) - ![](https://secure.gravatar.com/avatar/63b496ec3806485229b4f934b26643dad6e734ca6e6ef7b38c846205b01cd37f? s=32&d=mm&r=g) - [Weston Ruter](https://profiles.wordpress.org/westonruter/) 5:15 am _on_ January 24, 2017 - I think part of this has to do with having the “template tags” always output container elements with standardized class names. For example, `get_custom_header_markup()` was added in 4.7.0 and the element has a fixed ID which can be targeted by selective refresh. The problem with the site title and tagline is that there are no template tags that also enforce the container element’s ID or class name. - ![](https://secure.gravatar.com/avatar/c279d00cf8d7c55faab3acb6ee3a7f2eb5bb2e5e81aa73c143e627ca3902884e? s=32&d=mm&r=g) - [David A. Kennedy](https://profiles.wordpress.org/davidakennedy/) 6:55 pm _on_ January 25, 2017 - > I wrote a little proposal for this a while ago - I really like the ideas in there. It basically cuts out one step in the coding process, which is what I’d like to see happen. 91. ![](https://secure.gravatar.com/avatar/eae9b03fdf1750ad9ecddf610003712fb406bce09006a0c4596071960057ea0e? s=32&d=mm&r=g) 92. [Ulrich](https://profiles.wordpress.org/grapplerulrich/) 8:06 am _on_ January 20, 2017 93. One thing that gets me everytime I use 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. is that the close button stays at the top and the back button disappears when I scroll down the settings. To be able to go back to the previous panel I need to scroll up again. I sometime accidentally click on the close button. 94. I would love to see custom menu items to be supported by the customizer [https://core.trac.wordpress.org/ticket/18584](https://core.trac.wordpress.org/ticket/18584) 95. The menu code should be abstracted so that it can be easily used for other purposes. I like the idea of using that setup to build a custom home page or a custom page. Or even provide a easy way to create a custom page. As we have an year time it would be good to get the whole custom home page problem solved. [https://core.trac.wordpress.org/ticket/19627](https://core.trac.wordpress.org/ticket/19627) 96. I would like to see parts of the documentation improved. For example: In [WP_Customize_Selective_Refresh::add_partial( $id, $args )](https://developer.wordpress.org/reference/classes/wp_customize_selective_refresh/add_partial/) there is no inline documentation what values can be provided for teh args. Only by reading the code I am able to work out what the variables are but it is not so easy as the args are all of the public variables in the class. 97. * ![](https://secure.gravatar.com/avatar/63b496ec3806485229b4f934b26643dad6e734ca6e6ef7b38c846205b01cd37f? s=32&d=mm&r=g) * [Weston Ruter](https://profiles.wordpress.org/westonruter/) 5:12 am _on_ January 24, 2017 * > One thing that gets me everytime I use 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. is that the close > button stays at the top and the back button disappears when I scroll down > the settings. To be able to go back to the previous panel I need to scroll > up again. I sometime accidentally click on the close button. * For this see [#35186](https://core.trac.wordpress.org/ticket/35186) (Put the Customizer “back” button next to the “Close” button). * > I would like to see parts of the documentation improved. For example: In > WP_Customize_Selective_Refresh::add_partial( $id, $args ) there is no inline > documentation what values can be provided for teh args. Only by reading the > code I am able to work out what the variables are but it is not so easy as > the args are all of the public variables in the class. * Thanks, I’ve filed [#39671](https://core.trac.wordpress.org/ticket/39671) to fix this. Comments are closed. # Post navigation [← This week’s design meeting agenda for January 12th](https://make.wordpress.org/design/2017/01/11/this-weeks-design-meeting-agenda-for-january-12th/) [Share a walkthrough of setting up a WordPress site →](https://make.wordpress.org/design/2017/01/18/share-a-walkthrough-of-setting-up-a-wordpress-site/)