Tag Archives: menus

Ryan Boren 5:39 pm on August 20, 2015
Tags: , , , , , menus, ,   

Menus, Customize: Visual survey of menu locations, Macnchrome, iPhone 6+

Visuals for a locations, groups discussion. https://wordpress.slack.com/archives/design/p1440091790000074

Macnchrome:

iPhone 6+:

#chrome, #customize, #desktop, #ios, #macos, #menus, #phablet, #visual-survey

Nick Halsey 3:54 am on June 14, 2015
Tags: , , , , menus, parity, parity-check, visual-compariosn   

Menus in the Admin and the Customizer: UX Flow & Performance Comparisons

For this post I’ve prepared a series of short gifs depicting the flows for various small menus tasks. Each task was completed using the admin, then 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., attempting to be as equitable as possible with interaction speed, initial mouse position, etc. to make side-by-side comparisons that realistically compare the speed with which tasks can be completed in either interface.

For the tests, I added links to both Menus UIs to the admin bar (4.3 will have one link here, to the Customizer). I ran into a few areas where the experience could be improved, but in terms of timing, the Customizer version wins in most of these scenarios currently. Note that this is intended to compare the experience for power users. I recommend opening the videos to view them larger, as the space is fairly restricted here.

Menus Admin Screen Menu Customizer

Front page -> Menus -> open the menu set to the primary location (admin).

Front page -> Menus -> open the menu set to the primary location (admin).

Front page -> Menus -> open the menu set to the primary location (Customizer).

Front page -> Menus -> open the menu set to the primary location (Customizer).

Front page -> menus -> social menu (admin).

Front page -> menus -> social menu (admin).

Front page -> menus -> social menu (Customizer).

Front page -> menus -> social menu (Customizer).

Front page -> menus -> "everything" menu with 350 items (admin).

Front page -> menus -> “everything” menu with 350 items (admin).

Front page -> menus -> "everything" menu with 350 items (Customizer)

Front page -> menus -> “everything” menu with 350 items (Customizer)

Front -> create new menu, add home link, set to primary location (admin).

Front -> create new menu, add home link, set to primary location (admin).

Front -> create new menu, add home link, set to primary location (Customizer).

Front -> create new menu, add home link, set to primary location (Customizer).

Front page -> add five latest posts to menu (admin.

Front page -> add five latest posts to menu (admin.

Front page -> add five latest posts to menu (Customizer).

Front page -> add five latest posts to menu (Customizer).

Front page -> add the "Audio" tag and the five audio-related posts as children (admin).

Front page -> add the “Audio” tag and the five audio-related posts as children (admin).

Front page -> add the "Audio" tag and the five audio-related posts as children (admin).

Front page -> add the “Audio” tag and the five audio-related posts as children (Customize).

Front page -> delete the six items that were just added (admin).

Front page -> delete the six items that were just added (admin).

Front page -> delete the 6 items that were just added (Customizer).

Front page -> delete the 6 items that were just added (Customizer).

Switch from viewing one menu to the social menu (admin).

Switch from viewing one menu to the social menu (admin).

Switch from editing one menu to the social menu (Customizer).

Switch from editing one menu to the social menu (Customizer).

Add sub-menu hierarchy to the everything menu with 350 items (admin).

Add sub-menu hierarchy to the everything menu with 350 items (admin).

Add sub-menu hierarchy to the everything menu with 350 items (Customizer).

Add sub-menu hierarchy to the everything menu with 350 items (Customizer).

Fully nest the social menu - 10 levels deep (admin).

Fully nest the social menu – 10 levels deep (admin).

Fully nest the social menu - 10 levels deep (Customizer).

Fully nest the social menu – 10 levels deep (Customizer).

Open an item's original link (admin).

Open an item’s original link (admin).

Open an item's original link (Customizer).

Open an item’s original link (Customizer).

Make every link in the social menu open in a new tab (admin).

Make every link in the social menu open in a new tab (admin).

Make ever link in the social menu open in a new tab (Customizer).

Make every link in the social menu open in a new tab (Customizer).

#customize, #customizer, #flow-comparison, #menu-customizer, #menus, #parity, #parity-check, #visual-compariosn

Konstantin Obenland 9:47 am on June 12, 2015
Tags: , menus   

Menu Customizer, iPhone 5 emulated

#menu-customizer, #menus

Ryan Boren 2:12 pm on June 4, 2015
Tags: 32733, , , , keyboard-flyup, menus, ,   

Customize, Menus: Menu customizer, iPhone 6+

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 4.3-alpha-32689 and Menu 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. 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 0.5-20150604.

#32733, #customize, #customizer, #ios, #keyboard-flyup, #menus, #phablet, #visual-record

Nick Halsey 1:52 am on May 26, 2015
Tags: , , , , menus, , , , winphone   

Menus (admin) with Windows Phone on 4.2

  • WordPress 4.2.2
  • Old menus admin screen (to be compared with Menu 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.)
  • Windows Phone 8.1, IE11 Mobile (only browser allowed on this device)
  • Testing on an actual site whose menu I actually needed to make a couple edits to… because why not 🙂

Open site (logged in). Tap dashboard icon.
Tap Menus.
Menus page loads. The menu I want to edit is selected. Scroll down to the menu.
Trying to delete “Big Buddies”. Tap on it. Nothing Happens. Try zooming out.
Tap on the arrow for the item I want to delete.
After a delay, it opens. Tap remove.
The menu item is deleted. Now need to add a new item. Scroll up.
The item I need to add is a post. Tap posts.
Tab the checkbox for the item I want to add.
Tap add to menu.
Loading indicator, then stops. Scroll down.
Item is at the bottom of the menu. While scrolling, hierarchy and positioning is messed up for several items at the bottom of the menu. Need to drag it up.
Try dragging the new item up. It needs to be a sub-item of “PSWC”, which is much higher up the screen, just out of view. It lands three items up. Repeatedly try dragging it up higher with various techniques, no luck. Look around for another way to move items. Try tapping the arrow icon again.
Tap “up one”.
Item moves up, continue tapping up one several more times.
More up one. Eventually get to top and move “under PSWC”.
Scroll back down, need to cleanup broken hierarchy from trying to scroll earlier. Tap arrow icon.
Tap “under Environmental”.
Tap arrow for the Geotech item.
Tap out from under environmental
Tap to close the menu items (2 taps).
Look for save button. Scroll up, then down all the way.
Tap save menu.
Loading…
Tap home icon.
Tap visit site.
Site loads. Tap menu icon.
Item was successfully remove. Scroll down.
Item successfully added, messed up items successfully restored to correct positions.

#4-2, #customize, #customizer, #flow-comparison, #menus, #mobile, #phone, #visual-comparison, #winphone

designsimply 9:19 pm on May 25, 2015
Tags: , , , menus,   

Testing Menus in the Customizer

  • WordPress 4.3-alpha-32600
  • Menu Customizer 0.4-20150525 (a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. feature-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 candidate)
  • Safari iOSiOS The operating system used on iPhones and iPads. 8.3 on iPhone 6

Observations

Note: this feature is still in development so there are some known issues (which I’m sure I’ve hit here).

  • Blocker: tapping “+ Add Link” in a new menu resulted in a phantom 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. (looks like it doesn’t move over into view like it should?).
  • The “+ Add a Menu” button is hard to spot on mobile if you have several menus saved already.
  • The “+ Add a Menu” button is sits really close to the bottom menu bar in Safari on iOS. Some space below it could help make it a bigger tap target.
  • After tapping the “Reorder” link, I was surprised I could still tap and hold to drag menu items.
  • Scrolling is really hard on iOS, especially with the menu items being so wide on a small device screen.

Start in the dashboard.
Land at 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. menu panel after tapping Tap menu icon > Appearance > Customize.
Try tapping the arrow to the right of Menus and accidentally tap the 4-square-boxes icon which opens the advanced menu properties. This surprised me.
Tap Menu Locations.
Change the Primary Menu to “Shorter Menu” and tap “Done.”
From here, tried tapping “+ Add a Menu” and the “+” turned into an “x” but couldn’t see the form at fist because it was still off screen below the button.
Scroll down and then can see a form to enter a new menu name.
This is what I saw after creating a menu, but I think I tapped something I shouldn’t have and the blank keyboard seems like an iOS bug, so I tap “Done” and try again.
Tap “+ Add Links” button.
Got stuck here. The cursor is present but the UI is invisible (very odd).
Next, try editing an existing menu. Tap “Testing Menu” and it opens very low on the screen so I have to scroll down.
Tap “Pages” since it’s a duplicate. Tap “x Remove” and it gets rid of the menu item.
Some of the items/arrows have a darker outline, but I’m not sure why. They seem stuck. (This could be user error because I tapped around a bunch.)
Tap “Shorter Menu.”
Tap “Reorder.”
Tap indent icon to make “About” a submenu.
Open a menu with lots more items in it and scroll down to the “Reorder” link.
Tap “Reorder” and notice that I can still drag and drop while in this mode.

#customize, #customizer, #ios, #menus, #phone