Frigate 0.14 UI Design

[Morphy99]

First off, congratulations on this beta, the new features in the UI are looking amazing! I have one bugbear with it though... It's too minimal! I've been using it 24 hours and I'm still not sure what I'm looking at... Why no labels for anything? Tooltips? I shouldn't need instructions to navigate a UI.

[NickM-27]

You could ask 100 designers with the same prompt and get 100 opinions on the best way to design something. Blake explained the rationale and process of getting the designs in the blog post

It is not clear what things you are not finding clear, some things take time to get used to especially when you are already used to doing things a different way.

[NickM-27]

at this point we can see that there are thousands of users that have jumped on to the beta updates, we have not received any appreciable amount of basic questions about how to use the UI. A question here or there about specific things, but the basics of using the UI, reviewing cameras, etc. have not gotten many questions at all.

If you have notes on specific things that you find confusing or unclear then that would be helpful to understand, but if this is just a general complaint then perhaps you just need more time to learn how to use it.

[Morphy99]

OK it just explains the features, which are amazing, great work. The UI is still way too complicated though. What was behind the design decision not to label anything?

[Morphy99]

If you have notes on specific things that you find confusing or unclear then that would be helpful to understand

I'll put together something more constructive.

but if this is just a general complaint then perhaps you just need more time to learn how to use it.

Not a complaint! How could I complain with this feature packed release! Just trying to help the project with my user experience. I will spend some time with it and come up with some ideas, maybe you like them, maybe you don't. I won't be offended either way.

[Morphy99]

at this point we can see that there are thousands of users that have jumped on to the beta updates, we have not received any appreciable amount of basic questions about how to use the UI.

I'm surprised but maybe because a lot of people use the Frigate HA integration as a daily driver which hasn't changed? Or maybe it's just me! 😆

[NickM-27]

the massive amounts of feature requests, bug reports, etc. suggest otherwise 👍

[hawkeye217]

Be sure to check out the guided demo as well: https://app.supademo.com/showcase/clvi4jyof0kpfh7gr9921vsb7

[Morphy99]

Be sure to check out the guided demo as well: https://app.supademo.com/showcase/clvi4jyof0kpfh7gr9921vsb7

I've seen it, doesn't explain a lot.

[ofcedwards]

I'll add on that using the desktop UI goes a long way in understanding how the mobile UI works. That said, the one thing I see missing from the mobile UI is seeing the number of alerts/detections displayed next to their respective icons on the review page. I'm assuming it was decided not to include them as elements due to the limited space on mobile, but it would be great to have some indication that there are new detections to review when looking at alerts.

Otherwise, the changes are great! I've stopped using Home Assistant to view live feeds/events and now have Frigate saved to the home screen on my phone as an "app".

[ofcedwards]

Numbers have been added to the mobile UI for alerts/detections. Thanks Nick!

[dz4news]

I'll will second the mobile UI needs a way to indicate the number of alerts and/or detections. I have been using both the desktop and mobile, that is the only thing I see that needs attention.

Concerning the overall usage of the revamped version, you get use to it over time. I am at the point that the older version seems very clunky. Overall a very impressive upgrade to the system!! Im sure the future versions will only continue to complement the update.

[bakedhorse]

I agree that some things are not exactly clear, specifically when it comes to the mobile interface. My example is the alert, detection, and motion buttons on the top having 0 indication what they are besides color. Sure that I know that, but not my family members who gotta get used to this new interface as well and some of them don't use PC.

I have a lot of nitpicks too, subjective stuff. Though I wish the Review video took up more space, it has borders around it that waste a lot of space imo.

The UI is very buggy, however that's expected for the betas and is the reason for betas to be a thing.

[hawkeye217]

The UI is very buggy, however that's expected for the betas and is the reason for betas to be a thing.

Please open a bug report for any bugs you encounter, including your config, steps to reproduce, and any other relevant info (browser version, etc). Bug reports are the way we'll make this better for everyone!

[NickM-27]

This is relatively close to going from beta to release candidate, if you have a bug then waiting to report it just makes the process longer

[bakedhorse]

I am reporting and I just meant in the whole process. The UI is much more polished than it was from Beta 1.

[Morphy99]

Here's a few I've managed to document so far:

Labels
I appreciate the cleaner looking UI but I think labels on the camera streams are a lot more user friendly and easier to identify what the images are. Yes I can enable OSD labels on the camera feeds, but those are very hard to read on small thumbnails. With 4 cameras it's usually ok but start going above that and labels become a lot more useful.

Alerts and detections on the history view timeline.

When reviewing the recording history of a camera, there is no visibility to see events on the timeline, just motion. Clicking on the Events button shows these but then loses the timeline. It’s also quite confusing that the review icon on the left menu gets highlighted on this screen, when in fact the review page is slightly different.

Event view playback behaviour

When reviewing events in the camera history, restarting the clip is a common action in my experience. Clicking the event thumbnail, when it's playing back, doesn’t restart the clip. The only way to go back is with the tiny reverse arrow and that’s just a skip back 10 seconds, not from the start of the clip.

[NickM-27]

okay, reproduced the issue with clicking on the events while it was still playing, fixed in #11948

[Morphy99]

Alerts and detections both highlight the timeline red/orange respectively.

You're both correct. Maybe I was looking at a period with no detections or alerts but I swear it wasn't showing yesterday and when I looked at it earlier 🤔

[ofcedwards]

Is it possible you were looking at the motion tab with "motion only" selected? I suppose it's also possible you had motion recorded with no events.

[Morphy99]

No it was definitely going through camera history, there is no option to filter by motion only that way. I can't reproduce so forget it for now.

[Morphy99]

we went back and forth on camera labels but even with 8 cameras I know what camera I am looking at. The problem with camera labels is they would cover the camera image potentially covering an import part of the camera stream.

Is it not possible to add a border to the camera stream / thumb so the label can be added below or above it? I appreciate most people will be able to quickly identify the cameras but if for example, you have guests house sitting, they may not be so familiar. Also with cameras facing large outdoor gardens it can be trickier to identify. I just think it's a step too far in design aesthetics over usability/easily accessible UI design. Maybe it could be a settings option to enable or disable them?

all my cameras have built in camera name in the camera stream which can be changed size so it would work if that was desired.

Crappy Reolinks don't have that feature for size/colour. Although I don't think I'd want it that big in all scenarios apart from viewing small thumbs of clips.

[Morphy99]

Has the favourite option been removed for events? I know exports does the same thing but it's a bit more long winded than just tapping a star?

I'm not sure I agree with the Exports name either, if this is the case. You may not want to export it... Maybe "Saves" or "My Clips" ?

[NickM-27]

Yes, it's been removed. You can right click (or long tap) a review item to export it directly.

[ofcedwards]

I believe there's been either a discussion or issue opened for this, but favorite has been removed for exports. The idea is that exports are saved outside of the retention periods.

[Morphy99]

Yes, it's been removed. You can right click (or long tap) a review item to export it directly.

Ah ok cool. Now you see this needs documenting or a more obvious way ideally. I've seen those icons on the events to show object types, why can't there be a star on it like before...

Is anyone working on any documentation for the new UI? I could lend a hand with that possibly.

[ofcedwards]

https://deploy-preview-11947--frigate-docs.netlify.app/ These are the beta docs, but I don't think exports have made it in there yet. Searching through the discussions on 0.14 will yield a lot of info on the updated features that's missing from the docs right now.

[NickM-27]

I think for existing users it might not be obvious at first because right clicking was not used in the old UI, but in general right clicking / long pressing is a well established pattern across interfaces and there are many right click / long press interactions throughout the UI so once it is learned I don't think there will be any issues.

having buttons on top of the review items doesn't make sense because when you hover it plays the preview, so that would make pressing buttons difficult to implement and difficult to do.

we have no plans for UI documentation

[DrSpaldo]

I think if you are going to add right click / long press functionality, it needs to apply to all areas and be consistent. Ie. Some things allow right click, others do not. They default back to the web browsers right click instead...

[Morphy99]

Has anyone raised any issues with the Mask/Zone editor yet? I have a couple of issues:

• In the preview of the camera image, all zones and masks are visible at once, without the ability to remove the visibility of a particular type. This ability was present in v0.13 and is needed imho.
• When hovering the cursor over an existing zone/object/motion mask the cursor changes to a multipoint arrow to suggest it can be dragged, but this isn't the case. It's particularly confusing when creating a new zone, for example, and then going over an existing motion mask to drop a point and this cursor appears.
• Object masks all appear grey which is difficult to see which one is selected, especially without the ability to remove other masks from the view.

[NickM-27]

In the preview of the camera image, all zones and masks are visible at once, without the ability to remove the visibility of a particular type. This ability was present in v0.13 and is needed imho.

that is incorrect. There is a filter in the top right to toggle each type

[Morphy99]

Ah ok, I assumed that was to select which camera.

[NickM-27]

that's what the right one is for, the filter button is for filtering what is visible

[hawkeye217]

• When hovering the cursor over an existing zone/object/motion mask the cursor changes to a multipoint arrow to suggest it can be dragged, but this isn't the case. It's particularly confusing when creating a new zone, for example, and then going over an existing motion mask to drop a point and this cursor appears.

Fixed in #12297

[Morphy99]

I think I've caught another one but it might be to do with my device or the Android Companion App. When exporting, I want to select a custom time range and a time picker pops up. The first time I tried, the on screen numeric keypad popped up, which allowed me to enter the numbers. Since then it's not popping up or maybe I'm doing something wrong? I'm tapping on the number I want to change?
Also when it did pop up, it didn't accept 9 as an entry before auto tabbing to the minutes, I had to enter 09 which it then tabbed over and changed back to a 9 😄

I was using custom as I had forgotten the long press function was to export a clip. CAN WE BRING BACK THE STAR 😆 It's so much more intuitive to quickly save clips, especially on mobile when you have to switch to events from timeline first.

Another thing I miss is scrolling through the events by default would go past the last 24 hours, and keep loading them upon reaching the end. Now I have to adjust the filter which isn't as intuitive imho.

Another one is the renaming exports dialogue doesn't warn about illegal filename characters. It appears to allow saving but the name doesn't change.

Does the saving of exports work on the iOS companion app now?

[NickM-27]

We have no control over the time input dialog behavior, that is using the built in browser time picker

This is deliberate, the review screen with the timeline is dedicated to the 24 hour nightly review. More screens will exist in the future for other use cases.

That's a good note about renaming exports, I'll take a look at that.

Not sure what you mean about saving of exports on iOS companion app.

[Morphy99]

We have no control over the time input dialog behavior, that is using the built in browser time picker

Might be a bug in the Android companion app then.

Not sure what you mean about saving of exports on iOS companion app.

It definitely exists in the HA frigate card that the download clip/snapshot function doesn't work. Pretty sure it's in the Frigate GUI too but I will have to confirm if it still exists in 0.14. I think it would as it feels like a limitation of the app's permissions.

[NickM-27]

Not sure, I run Frigate as a PWA and on my iPhone the download function works just fine