Edge Mode: Usability Testing & New Feature Preview

Author Posts

Sebastian April 18, 2015 at 3:47 am

We recently outlined some changes to the interface based on customer feedback. The response was overwhelmingly positive and we expect to have the new changes completed some time in May.

We want to make usability testing a core part of our development process. We decided that we need a system for making this quick and convenient for anyone interested in helping shape Microthemer’s development. And so we’ve introducing an Edge mode feature where you can try out new features and comment on them before they become an established part of Microthemer.

We’ll mainly use this when we’re changing something and we want to make sure it’s a change for the better.

Sign up for Edge Mode Alerts
If you’d like to be notified when ever we trial a new feature in edge mode please subscribe to our Edge Mode Features mailing list.

About the new selector wizard targeting feature we’re trialling in edge mode
We’re piloting this system by introducing a simple change to the selector wizard targeting tab that will only happen when edge mode is enabled. Instead of using the slider on the left to adjust the selector, you can now simply hover your mouse over a suggestion to preview how it will target things on the page (the highlighting will adjust on hover). You can then click the suggestion you are hovering over to select it.

We’ve added a regular scrollbar on the right so that you can easily navigate down to selectors that are out of view. The previous method of dragging the slider right to the bottom to initiate scroll was a bit awkward and we recently learned that many people didn’t even notice that a scroll option was available (that’s why we’ve rolled out this alternative system ASAP).

Whenever we roll out a feature in edge mode, we’ll create a forum post like this one for people to comment on. Broadly speaking, we’re interested to know if we should:

  1. Implement the new feature without modification.
  2. Implement the new feature with some adjustments.
  3. Make it a configurable option that can be enabled/disabled by the user.
  4. Go back to the drawing board.

One-liner feedback would be awesome (unless you want to say more). We want this edge mode system to be as streamlined as possible. We’ll send out a newsletter to those that subscribe to our Edge Mode Features mailing list whenever we pilot a new feature. And if a few people comment to say it’s good or generally good but needs minor adjustments, we’ll make it part of the main Microthemer build within a few days to one week.

Imagine how nice Microthemer will be to use in 6 months to a year with this system scaffolding our development process.

Abland April 19, 2015 at 1:21 pm

Hi, Sebastian,

The targeting selector is a definite improvement. I had found just now that double-clicking to target a region, then switching to the Inspector tab to better target, then switching back the new selected area wasn’t highlighted. Trying to save gave the error that a value needed to be entered. Only by sliding to a different selector, then back, would it highlight.

This new hover for info and click to select works, even when going to Inspector and back.

The delay time on the tooltips is a nice feature to select and set. For my use, I think the default of 500 works well. You did an excellent job on the tooltips, by the way. Often they can get in the way, but yours are easy to read and they get out of the way quite conveniently.

Will there be an option to allow some of these edge changes to remain while being able to turn edge mode off? I have client sites where I don’t want to overwhelm them with options, but like to roll out new features when they’re a real asset – like the selector wizard targeting tab. Don’t go out of your way on that thought, though.

Very smart choice for testing new features – I’m in 🙂

Sebastian April 20, 2015 at 3:25 am

Hi Abland,

Thanks for the detailed feedback, and for signing up to the edge mode mailing list.

I’m having some trouble replicating the issue you flagged when switching between the targeting and inspector tab. Does this occur when edge mode is enabled or disabled?

I’ve updated the topic introduction to make it clear that we intend to integrate new features we’re trialling in edge mode fairly rapidly if the change is welcome – a few days to one week. Would that work with regards to your clients?

Also, while I’ve got your attention, you mentioned the new tooltips. I agree that they’re pretty useful. But making sure they don’t get in the way is a top priority for us. I’m wondering if:

a) The computed CSS value tooltip should actually only show on the property label (not directly over the input field). So for instance, if you hover over the first “F” icon on the font group the tooltip says “Font Family”. Where as it could say “Font Family: Georgia”.
b) The tooltips that describe what the selector suggestions do should maybe only show when you hover over a (?) icon that I could insert at the start of every selector suggestion.

Cheers,
Sebastian

Abland April 20, 2015 at 6:10 pm

Hi, Sebastian,

The issue occurred when edge mode was off. The new hover to highlight when edge is on is working flawlessly.

No problem on the wait time. I was just curious if it was possible to enable a feature while it was still edge without requiring edge mode itself to be enabled.

a) For the tooltips, is a tier level a possibility? The higher the number the more extensive and detailed the tooltips will show? I think some pure developers will have them level 0 while site managers might have them at a higher level for their end-user clients.

b) For the “?” option I think it might be going in the opposite direction of usability. I took a site on a standard genesis framework and replicated it to a pro genesis theme in one day using microthemer. The work flow with tooltips was fluid. I saw immediately what I was selecting, and the tooltip moved instantly when I went to make use of that option.
Lol – I even noticed you went to the details of having some tooltips display below rather than to the side because it worked better. As a self-recognized OCD man I say, Bravo! 🙂

My one-line opinion is the new edge selector feature is great as is.

Abland April 20, 2015 at 6:22 pm

** a proviso – I have purchased license to all the pro genesis themes. The replication I mention was moving a site using a pro theme to a custom child theme while preserving the original site appearance. (there’s the OCD kicking in, but thought it worth mentioning)

Sebastian April 21, 2015 at 4:37 am

Hi Abland,

Thanks for the clarification on the targeting issue with edge mode disabled. I’ve identified the cause but I might hold off fixing it that functionality will be removed shortly.

a) The idea behind the delay on the tooltips was that people could set it to something long (50000 – 5 seconds) if they don’t want to see them at all – or ‘native’ if they liked the way they were before. I know that isn’t quite what you were suggesting but I think if we’re not careful we could have a full options panel just for the tooltips lol!

b) I’m not sure I agree with you on this one. The downside I see with the tooltip showing when hovering over the textareas is that it obscures the suggestions directly below. Also, those that understand CSS selectors really don’t need to see it. In an attempt to convince you, I’ve just released version 3.6.3 which has an ( i ) icon to the right of the selector suggestions on hover – but only in edge mode. I for one am already enjoying edge mode for the rapid prototyping of features. I can demonstrate things like this live in no time at all.

ps I’ve moved the tooltip computed value to only show along with the property LABEL on hover. I’m sold on it, but please let me know what you think. This is available not just in edge mode because I think it compensates for a mistake the last release introduced (tooltips that are a distraction when entering style values). And I generally think it’s nice to show the label along with the computed value.

Cheers!

Sebastian

Sebastian April 21, 2015 at 4:42 am

ps I just noticed a bug when you hover over the (i) icon. The highlighting no longer corresponds to the selector in the textarea (because you are hovering away from the textarea). I’ll fix that if it becomes a fixture.

Abland April 21, 2015 at 2:32 pm

Hi, Sebastian,

Okay, it looks like the (i)s have it 🙂

You’ve convinced me. I was enjoying your design use of tooltips so much I didn’t consider they weren’t always necessary. Mousing over the (i) for more detailed info is useful, and moreso as an available choice if needed. Hopefully others agree as well.

Using the delay on tooltips to hide them didn’t occur to me but it makes sense. I personally like how they sync to my workflow so the default 500 is my own personal preference but the option is good to have.

I think the LABEL:VALUE is vision friendly – it almost tells me the value rather than my having to ask (consciously look)

mwdonnelly April 21, 2015 at 7:02 pm

I absolutely love the hover to highlight the referenced area when edge mode is on. It totally fixed the css nightmare that I had with the nav menu hover; I had previously had an issue of scores of targets to select and I wasn’t sure what was what; with the hover/highlight, I was able to target the right css to fix my issue and NOT have to resort to creating selectors for each individual menu item. I like the OPTION of hovering over the (i) icon if I’d like to see the descriptives.


Sebastian April 21, 2015 at 11:15 pm

I appreciate the feedback guys. So far so good on the new selector targeting then.


@Abland – I’m glad you’ve warmed up to the ( i ) icons. Thanks for getting so involved in the discussion.

You must login or register to reply to this topic.