0

I am working on a Chrome extension, which helps users watch TV shows together on a media-streaming service. Basically, its functionality is similar to Tele Party (formerly known as Netflix Party), and the media-streaming service is almost identical to Netflix. You open a page with the TV show playing, click on the extension button, others have to visit the same page of the service, open the extension too, and then it syncs the players of all of the participants.

Since it is a Chrome extension, the scope of this question applies only to desktop devices.

On the screenshot below, you can see the page of the streaming service with the player, and on the right is the UI of my extension. As you can see, the player itself takes up the whole viewport of the page, similar to Netflix. And my extension shrinks the player a little bit on the right, to make room for its UI.

Extension embedded to the player page

From the UX perspective, I realize that the user will probably want to hide my extension's UI while watching the show. However, I would like the user to have the ability to reopen the app.

My question is, how can I hide the UI of my extension completely (because the player takes up the whole page, extension should not obstruct the view), while still providing the user with some mechanism to reopen the UI?

My first thought went to quick notes on MacOS:

MacOS quick note

It does not appear on the screen at all, but when you drag your cursor to the bottom right corner of the screen, it slides out, and then when you click on it, regular application window opens.

I am open to any other approaches and suggestions, as well as criticism. Thanks in advance.

1
  • Is your extension hidden when the player is put in full-screen mode? Commented Nov 27, 2022 at 9:13

1 Answer 1

1

Hot corners thoughts - I generally have all my windows full screen, so emulating macOS' Hot Corners in the browser would probably cause me to trigger my native macOS hot corners and make your UI hard or frustrating to access. You could have it be always peeking out from the corner and it would be easier to access - but it could overlap some page content and personally I wouldn't like the aesthetic because it creates a kind of visual tension.

Chrome extension icon - As someone who would be a new user to your extension, if the UI was not showing and there were no other indicators, I would instinctively look to the extensions menu in Chrome and click on your extension's icon to activate it and open the UI.

Side collapse - Perhaps it could collapse to the side and have an arrow to open it when you hover nearby. One way to teach users about this feature: A user clicks a button to collapse the UI, then UI slides away and an arrow button slides in from the side, pauses, then slides out, indicating that it is there but hidden and connected to the collapsing feature.

Inline icon - Another option I've seen from some extensions is to place inline content on the page - e.g. you could place your extension icon next to the settings button on the video player. You could even indicate states with it e.g. keep it white if you have no friends currently on the page and give it a color or notification bubble if there is activity.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.