Multi-window

This application feature is optional. Based on its functionality, an application can use 'full window' or 'mini window' modes.

The figure below displays a video player screen, which uses both full and mini windows. Clicking the Minimize button or icon lets users switch seamlessly from a full window to a mini window.  

Full window and mini window in a video player
Full window and Mini window in a video player

 

Follow these guidelines if you plan to design a mini window in your application:

  • Use a title when necessary. If you don't use a title, you can add a Show/Hide button instead.
  • You should include 'close application' and 'change to full window' functions in the mini window.
  • You can place an Expand button at the bottom right side of the screen.
  • You can also provide 'resize' and 'move' functions.

Button layout in the mini window and content area of an application are as follows:

Button layout in a multi-window application
Button layout in a multi-window application

 

For a mini window default layout, consider the following guidance:

  • Support consistency with mini apps.
  • Keep button functionality consistent:
    • Title area: Close button / App title / Full view button
    • Application area: Application content
    • Handler: Drag to resize the window

The application area in the mini window does not need to offer all functions that the full window does. Instead, you should add only important or frequently used functions. If an exclusive function is necessary in a full window, you should make sure the user can easily switch from the full window to the mini window.  

Switching to the mini window and back Switching to the Mini window

 

Applications that use the mini window mode should have a Minimize button in the full window mode or provide a minimizing option in the Menu pop-up to switch to the mini window. The mini window should offer a button on the right side of the title area to switch to the full window.  

If the mini window has a title, the user can move the window by dragging the title. If no title exists, the user can move the window by dragging the content area.

Moving the mini window
Moving the mini window

 

The resize function allows the user to adjust the size of the mini window by using a handler at the bottom right side of the window. The resize function is optional and should be used judiciously.  

Resizing the mini window
Resizing the mini window