Just Mousin’ Around

When your mouse is over a component in a MixFrame page, a small trash-can button will appear so you can remove the component. Simple, eh?

Mouse interactions are easy to conceptualize and describe. When you put your mouse over X, Y happens. When you move it off of X, Z happens. However, the system powering these interactions is a little more complex.

There are actually two pairs of events you will run into: `mouseover`/`mouseout` and `mouseenter`/`mouseleave`. There a big difference between them that becomes apparent when elements are nested inside each other. See them in action:

mouseover & mouseout
image00

mouseenter & mouseleave
image01

If you use `mouseover`/`mouseout` on nested DOM elements you may get some weird results, because moving your mouse onto a child node will trigger a `mouseout` event, just as if you had moved the mouse completely off the bounding box.

If you use `mouseenter`/`mouseleave` on nested DOM elements, you may get some weird results too. The `mouseleave` event does not fire when you move the mouse onto a child element, even though you might expect it to.

This presented a problem for our little trash-can, causing it to disappear and even flicker at times. Because we wanted to detect (A) when the mouse moved onto a component from anywhere — even a child element — and (B) when the mouse moved out of a component’s bounding box entirely, we needed to use the `mouseover` and `mouseleave` events together. This is a little unexpected, but was exactly what we needed.

UX Iteration: Trash

As you arrange components on your page, you’ll want to remove them from time to time. There are a few ways to do this. We started with the most obvious: a trash-can drop zone in the corner of the screen where you can drag items to be deleted.

image00

This looked neat, and it worked for the most part. However, removing multiple items started to fatigue the eyes and fingers, moving the mouse back and forth across the screen. Larger components also obscured the UI below the ghosted image, making it hard to tell when your mouse was over the trash.

So we’re iterating on this UI, by giving each component a trash can icon instead. As you hover your mouse over each component, an icon-button appears in the corner. Click it, and say bye-bye to that component. This is a much quicker interaction, so it is an improvement over the old drag-and-drop.

image01

Now, the icon-button pops up a lot and it does start to feel somewhat cluttered as is appears and dissappears around the page.

Iterating on this concept, it might be nice to be able to select the component, then delete it. Like you would in a graphics program. This would also work in tandem with more advanced options we have in the roadmap, such as editable text regions.

Currently, this experience is good enough for Phase I. So we’re rolling forward with it, with the plan of iterating down the line!

Building a Digital Product and Overcoming Fear

This week, my team and I kicked off development of a brand new digital project at 352. This is always an exciting time for us, yet this is different. 352 leadership has given us 6 weeks of company time to further develop our own product, Mixframe. Unlike a typical project, I’m a developer, Product Owner, stakeholder and end-user, all rolled into one.

As the product owner, I felt a few opening words to the team were appropriate to show my appreciation, and perhaps to inspire.

steve-ballmer-developersNow, despite being an introvert by nature, some part of me wanted to burst into the room with fanfare. I’d do a lap around the room and scream, “Developers! Developers! Developers!” at the top of my lungs. The team would cheer and high-five. We’d pop a bottle of champagne and dance on the conference room table (or Dougie, or Dab, or whatever kids are doing these days). I wanted to show my excitement.

Yet, flashy displays didn’t feel genuine because there was another feeling I had. Fear.

I’m afraid we won’t chart an effective strategy.

I’m afraid no one will like our product.

I’m afraid we’ll fail.

It’s something I think every Product Owner faces when heading into the unknown world of development, and I knew the team probably had the same fears. And you know what? That’s normal. I think it’s healthy to voice your shared fears and face them together.

So, at Monday morning’s Sprint 0, I left my dancing shoes at home, I kept the champagne corked, and I spoke in an even tone.

And I let the team know that despite all my fears, I’m still excited.

IMG_20160111_100250342

I’m excited because our product is something we’re passionate about. It’s not just a get-rich-quick scheme we’ll lose interest in. It’s a product our team would love to use every day. Not only is this a great reward in itself, it’s also the hallmark of a successful startup. Products are more successful when the team is intrinsically invested in the idea, just like ours.

I’m excited because 352’s executive leadership has shown nothing but support and guidance. New products need an incubation period and time to grow. Our leaders understand that. Every time I’ve spoken with them about our product vision, they have balanced advice. “First, focus on building something you believe in, then put the momentum behind it to let it grow.” It’s inspiring when bosses share your values.

I’m excited for one more reason. I’ve been a loyal employee of 352 for more than 15 years. It’s been an absolute blast but  – just like anyone else – I’ve considered other opportunities from time to time. And I’ve considered forming my own startup. I’ve wondered, if I did such a thing, who would work with me? Where would I find them? Would they be smart enough? Could I trust them? Would my product idea be any good? Would I know how to market it?

IMG_20160111_153851625

So many questions. I’d figure it all out in time but gosh, it would be an agonizing process. Now, I look around the room at my product team – my friends – and I’m blown away. I see some of the smartest and hardest-working people I know, encompassing all the values and skills needed to make a digital product successful. Development to design, from UX to marketing. Where else could someone find such a perfect opportunity?

We’ll be building our product during the next 6 weeks, and we’d like to share our progress with you. We’ll share our stumbles, our accomplishments and show you how 352 builds its products. Hopefully, we’ll show something that excites you.

No one can say what the future holds for our product, but if it can be successful, it surely has the best shot at 352.

And that’s exciting.

UX Iteration: Drawer vs. Modal

Currently, MixFrame keeps your component library in a categorized accordion, nested in a drawer anchored to the right side of the screen. This is great for demoing the project concept because the page and the library are visible in one view.

image00

However, this solution breaks down when you try to do more complex layouts with larger collections of items in your library. As the accordion gets taller it eats away at valuable screen space. Large collections of components can become unwieldy to scroll through, and nested scrollbars start appearing (a UX no-no). As you want to preview the page design, the drawer is always in the way.

So, I’m experimenting with a modal window to house the components instead. In general, I try to avoid modal windows because they are a over-used as an easy solution to a design problem. They force a user into one mode of thinking instead of allowing full freedom. Larry Tesler has even made it his mission to eliminate modes from software design.

But I think if you can quickly open and close the window and it feels fluid with your workflow, it could be an improvement. I’ve attached the Escape key to toggle the window open and closed. With one hand on the mouse and the other on the Escape key, you can jump around and it feels pretty powerful.

image01

I’m putting this prototype in front of my team today and watching how they interact with it. Hopefully it will be an improvement and solve a handful of design issues at the same time.