Category Archives: NUX

Andrew Ozz 6:57 pm on September 10, 2017  

Widgets, Menus and Customize Changesets

Earlier today “converted” a Squarespace user, sat there and watched them struggle with hierarchical categories, pages (and why they don’t show on the site), then creating a menu and adding to it. Then widgets… At the end had to explain how all these work, they were pretty happy to set and use them.

From this user (well, hoping to find more “uninitiated” soon), it looks like a good thing would be to tie creating pages with adding them to the menu. Also adding to the menu on the separate Categories and Tags screens.

Apparently the separate widgets screen was easier to grasp for a first-timer, possibly because it’s all about widgets/not that overloaded with all kinds of (new) things.

Menus were easier as soon as a menu was added to the proper location. However the flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
of making a page and then needing to add to the menu so the page shows on the site sucked. It was even more confusing when I tried to explain that a tag can be created and then added to the menu and it will show an “archive” of all the posts that were tagged with it. The separate Tags screen makes this somewhat clearer, and having an “Add to the menu” button/link for each tag would probably be a winner.

Thinking that we need “Annoyingly Aggressive Help” for new users 🙂 Maybe something like a modal overlay when they go to a page that is full of new concepts and “things” (of course that modal will also need “Don’t show again!” button).

I’ve been looking at the discussions around Customize Changesets. They seem like a good idea at first look, but IMHO they are an advanced feature that only few users need, and only a fraction of these users will understand and use. Helping out this person earlier made me think that what we have is already hard enough 🙂

Brian Krogsgard 9:15 pm on February 26, 2015  

Core support for WordPress images to open in a modal window

Goal: Create a mobile and user friendly default for viewing image details in WordPress.

One issue brought up in the NUX discussions 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/. is the way WordPress defaults handling of image details and linking when inserted into the content.

Screen Shot

Currently, by default, images link to attachment pages. There are options to link to nothing, the image source, or custom URLs.

Ticket #31467 proposes a new default to not link to anything when inserting an image.

I believe we should explore an option (and perhaps a default) to some style of mobile friendly modal window.

How others are doing it:

A number of sites have image detail linking methods that are worth looking into:

Tumblr links to modal Image only, with no flair:
Screen Shot
You can see more examples by clicking images on their Staff Picks page: https://www.tumblr.com/explore/staff-picks

Image linking to full size with an “X” to leave the view:
Screen Shot

You can explore more examples: https://michelesons.exposure.co/the-colors-of-antarctica

Photo site 500px.com pops up a modal with various options attached:
Screen Shot

The NYTimes has a hint on hover that the image can be viewed in more detail.
Screen Shot

Upon click, it pops up a model that includes pagination to other images in the article, as well as the caption, image source, and an exist button:
Screen Shot

Flickr has a similar method to 500px, but can additionally be clicked to review a full size non-screen restricted modal. See on their site.

WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ / Jetpack utilize a carousel with pagination of an article’s images, comments, and permalink:
Screen Shot

Live example: http://en.blog.wordpress.com/2015/01/27/customizing-twenty-fifteen/

I believe that something simple, but extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software. would be ideal. Perhaps a modal with an “X” for intent, but that has extensibility for including other items, like image captions and pagination to other attached images in an article.

Challenges and requirements

There are a number of challenges to consider.

  • Technology: This may well introduce a need for front-end 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/., though there are modals now that rely upon CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. only. Either will need to consider browser support.
  • Backward compatibility: We’d need to figure out how to treat images on existing posts and installs.
  • Gallery vs inline image support: We need to consider whether to utilize a feature like this for galleries and inline images, and even perhaps featured images outside of the_content (which would present challenges, as we can’t easily assume how those are being linked or not linked).
  • Library vs home-grown: Modals are not new to the web. Would we prefer to make our own solution for WordPress, or rely on an existing library.
  • Mobile and A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): Excellent mobile support would not be an option for this feature. We’d need to ensure quality mobile and a11y experiences.

Feature or feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins.?

I’m wondering if a project like this should be a small feature plugin. It’d be a good way to stretch our legs and test options in the real world, and prepare for merge to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. at a later date.