Sevaan Franks  🦊

Firefox's Customize Mode First-Time User Experience Mocks

  • Save
Firefox's Customize Mode First-Time User Experience Mocks teaching first-time tours tutorials mockups customization cursors animation ui firefox ux mozilla

Currently the Customize Mode tour in Firefox consists of one pretty unhelpful door hanger.

In this mock-up I propose having a larger cursor hand (possibly a Fox's paw) appear at the user's cursor position when the user first visits this page. It immediately moves off, grabs an icon, and drags it into the users toolbar and gives a thumbs up (or some other confirmation gesture like the A-OK hand) before transitioning out. The user gets to see by example how the feature works in a way that is eye-catching, engaging, and quick, and then they immediately get the opportunity to try it out themselves. I call it the "Teaching Hand".

I'm also recommending some other alterations to this section, such as jiggling all the draggable elements, and using marching ants to highlight the areas you can drag them to, rather than a static dashed line.

keyboard shortcuts: L or F like