Apple TV Interface Design

[rat-moonshine]

For a list of available UI-elements to tvOS with their images, are at here: https://learn.microsoft.com/en-us/xamarin/ios/tvos/user-interface/

Here is the tvOS component guidelines from Apple (set "tvOS" to filter): https://developer.apple.com/design/human-interface-guidelines/components/all-components

As per the initial inputs from @JoelProminic ,

---

The fields are split like this:

Camera information

• Camera-ID - only used for internal lookups
• Name - Display label. We don't want to take up too much space for this - the focus is on the Camera feeds.
• URL - the URL for the camera video feed
• Frequency - How frequently the camera should update. We may want more settings like this.

Organization:

• Group
• Sub-group

Security

• AllowedTVs

The UI should just be tiles of videos. The second design is based on my third suggestion below. The focus should be the cameras, so we should minimize the space used by other UI elements.

---

On second design though I argued that the design is complex/difficult in terms of implementation, tvOS navigation, and easy-of-reading. The tvOS design concept is to keep things less complex in view and easy of navigation is a requirement. So we should start with the conventional approach (first design).

[rat-moonshine]

Since we has two option types to handle filtration (Group, Sub-group), I felt some hesitation to provide the options efficiently keeping in the tvOS design conventions.

I propose three different designs here as proposals with their own dis/advantages. Please, go through the Notes section carefully.

Proposal 1

Proposal 2

Proposal 3

Notes:

1. Every thumbnail should have option to go full-screen
2. In Proposal 1 and Proposal 2, the problem with usability is user needs to scroll top to get the options available. However, Proposal 1 is more conventional and recommended over Proposal 2
3. In Proposal 3 we may not have adequate space to show full label in sidebar frame. In that case I'd recommend to show "Select Group" and "Select Sub-Group" option selectors as shown in the design

Please, check.

[rat-moonshine]

Based on the discussion with @JoelProminic , we talked the following design (for now) by considering all the aspects.

We discussed a new AllowedTVs form should be there beside Cameras form.

AllowedTVs basically another FormBuilder project (or .dfb) that will hold references to the TVs - this will supply a list to the tvOS app to choose from, instead of manually entering a value.

For a start, the new AllowedTVs form can contain following fields:

• ID
• Display Name
• Camera List (multivalue where values are Camera ID from Cameras form)

With this introduction the AllowedTVs should removed from the Cameras form.

Since filtration of items from Cameras form based on the AllowedTVs' multi-value Camera-ID would be difficult, a simpler approach we can take for the time being. We can load the full Cameras list at client-side, and then filter-out the cameras those being mentioned in selected TV's camera-list multivalue field.

So far, this what we discussed. I can create AllowedTVs form myself and starts with test data.

[rat-moonshine]

The basic design is now implemented.