Brow.si menu

Javascript add-on for mobile websites which creates a touch-friendly expandable menu with sharing, "save for later" and accessibility tools.

Role
Design & front-end coding
Created at
Brow.si
Date
Aug 2013
Brow.si's menu and sharing dialog

Functionality

Brow.si's floating button, open menu, text resizing menu, content saving menu and share dialog

Brow.si's floating button, open menu, text resizing menu, content saving menu and share dialog.

Brow.si's sharing dialogs

Share dialog is automatically collapsed (left) to show only social sharing. Expanding it reveals additional actions (middle) which are customizable (right).

Design

Brow.si's branding

Aside from being (touch) friendly, the floating button had to look familiar to the website's visitors. So every button was branded to the likes of publishers, using their brand color and icon. Visitors were mostly unaware of Brow.si being a 3rd-party add-on.

Brow.si's sharing interaction
Brow.si's following a website interaction

All Brow.si's dialogs are "continuous", meaning they never go away until their action is done. This helped indicating Brow.si's core functions which mostly involved jumping between tabs to connect with social services and waiting for a server response.

Moving and repositioning Brow.si
Brow.si's error dialog

Left: Since floating controls tend to overlap others, Brow.si could easily be moved and positioned anywhere else on the screen. Right: Navigating around and getting an error.

Design concepts

Animation concepts for Brow.si's menu opening Animation concepts for Brow.si's menu nevigation

Left: Concepts for Brow.si's menu opening animation. Right: Concepts for Brow.si's navigation/hierarchy animation (first ones in each set were eventually selected).

Somehow related work
Brow.si app