Video Call UI Layout for Unobstructed Interface Elements
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing video call systems face issues with screen space management during multiparty calls, particularly on mobile devices, where navigating away from the main video presentation screen often results in obscured UI elements due to floating windows that only display video data from the active speaker, limiting user interaction and visibility.
Innovation Solution
A user device with a network interface and processor configured to display video data from multiple users in a first user interface window, allowing users to navigate to secondary windows where avatar images represent other participants, with video data seamlessly replacing avatar images at predetermined display locations, ensuring uninterrupted viewing of UI elements.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If video data is displayed in a floating window that overlays the main view during a multiparty video call, then the user can view video data from the active speaker, but the floating window may obscure the user's view of UI elements on the screen
Solution Approach 1:
The video data display is segmented and integrated into the existing UI layout structure rather than using a floating overlay window. Each participant's video data is placed in specific designated areas within the UI, allowing the interface to be divided into functional zones that display both video content and UI elements without obstruction.
Solution Approach 2:
The video data display is merged with the main UI window structure instead of being separated as a floating overlay. The video presentation is combined with the contact list and other UI elements in a unified layout, eliminating the need for separate floating windows that could obscure interface elements.
2Adaptability or versatility
If a floating window displays video data during a multiparty video call, then the active speaker's video is visible, but the solution is restrictive and only displays video data from the active speaker
Solution Approach 1:
The UI layout is designed with universal applicability to display video data from multiple participants simultaneously. The contact list window and main presentation area can both function as video display zones, allowing the interface to adaptively show video data from any participant regardless of who is currently speaking, making the system versatile for different call scenarios.
Solution Approach 2:
The solution transitions from a single-dimension floating window approach to a two-dimensional integrated layout where video data can be displayed across multiple zones including the contact list area and main presentation area. This dimensional expansion allows simultaneous visibility of multiple participants' video feeds.
3Ease of operation
If the screen size is limited on mobile devices, then portability is improved, but available screen space for displaying video data and UI elements is reduced
Solution Approach 1:
The UI layout is designed to be dynamic and adaptive to the available screen space on mobile devices. The video display areas and UI elements automatically adjust their size and position based on the device's screen dimensions, allowing optimal utilization of limited display area while maintaining full functionality.
Solution Approach 2:
Different areas of the screen are assigned different functional qualities - the contact list area can display thumbnail video feeds, while the main presentation area provides a larger video display. This local differentiation of display quality allows efficient use of limited screen real estate by providing appropriate video visibility in each zone without requiring additional screen space.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
A device comprising: a display; an interface configured to exchange video data between the device and a network during a video call between a user of the device and at least one further user; a memory storing information identifying at least one display element each associated with one of the at least one further user; and a processor configured to run a client application operable during the call to: display received video in a first UI window on the display; detect the user navigating to a second UI window comprising one of the at least one display element; query the memory to determine a location for the display of the received video, and in response, display the second UI window and control the video received from the further user associated with the display element of the second user interface window to be displayed at a location of the display element.