Home

UI in standalone mode

%3CLINGO-SUB%20id%3D%22lingo-sub-729543%22%20slang%3D%22en-US%22%3EUI%20in%20standalone%20mode%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-729543%22%20slang%3D%22en-US%22%3E%3CP%3EIm%20a%20little%20concerned%20about%20changes%20of%20the%20desktop%20app%20UI.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20introduced%20a%20back%20button%20even%20though%20the%20%60navigation_ui%60%20is%20(not%20yet)%20a%20part%20of%20the%20manifest%20spec%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fw3c%2Fmanifest%2Fpull%2F766%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fw3c%2Fmanifest%2Fpull%2F766%3C%2FA%3E%3C%2FP%3E%3CP%3EMost%20of%20apps%20are%20built%20with%20an%20implementation%20of%20navigation%20UI%20(because%20of%20the%20lack%20of%20native%20support%20or%20for%20a%20better%20UX).%3C%2FP%3E%3CP%3EIn%20standalone%20mode%2C%20the%20%60navigation_ui%60%20should%20be%20%60hide%60%20as%20a%20default%20(for%20backward%20compatibility).%3C%2FP%3E%3CP%3EIf%20you%20argue%20'there%20is%20an%20arrow%20in%20apps%20installed%20from%20the%20Microsoft%20Store'%2C%20you%20should%20now%20the%20web%20is%20about%20backward%20compatibility%2C%20your%20product%20should%20be%20aligned%20with%20the%20web%2C%20not%20the%20other%20way%20around.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMoreover%2C%20%60translate%60%20button%20does%20not%20adapt%20its%20color%20to%20the%20%60theme_color%60%20but%20the%20main%20concern%20here%20is%20the%20app%20bar%20starts%20to%20be%20bloated%20with%20non-critical%20action%20buttons.%3C%2FP%3E%3CP%3ETranslation%20should%20be%20part%20of%20the%20%60three%20dot%20menu%60%20as%20it's%20not%20an%20usual%20action.%20The%20webappmanifest%20fixes%20the%20language%20with%20the%20%60lang%60%20property%20and%20can%20support%20internationalization%20internally%20if%20needed.%20Translation%20is%20a%20UA%20service%20and%20shouldn't%20be%20promoted%20as%20part%20of%20the%20app%20UI.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20548px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F121659i0EE2BE89F8C24CC3%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22edge_standalone_ui.jpg%22%20title%3D%22edge_standalone_ui.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENote%3A%20there%20is%20a%20misalignement%20of%20the%20arrow%20in%20fullscreen%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F121660i50860BCD2E00E5A7%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22fullscreen_arrow_alignement.jpg%22%20title%3D%22fullscreen_arrow_alignement.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-729716%22%20slang%3D%22en-US%22%3ERe%3A%20UI%20in%20standalone%20mode%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-729716%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F368669%22%20target%3D%22_blank%22%3E%40frlinw%3C%2FA%3E%26nbsp%3Bthanks%20for%20the%20feedback%20on%20App%20UI.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe%20made%20an%20additional%20small%20change%20to%20the%20back%20button%2C%20just%20to%20be%20complete%3A%20in%20current%20canary%2C%20the%20backbutton%20will%20disappear%20when%20there%20is%20no%20history%3B%20we%20took%20feedback%20on%20that%20and%20now%20it%20is%20visible%20but%20disabled%20when%20there%20is%20no%20history.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe%20do%20plan%20on%20having%20the%20ability%20to%20use%20a%20media-query%20if%20the%20app%20would%20like%20to%20hide%20the%20button%20because%20they%20may%20have%20implemented%20their%20own.%20That%20is%20not%20in%20yet.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe%20are%20in%20discussion%20currently%20with%20Google%20about%20back%20compat%20and%20whether%20standalone%20mode%20should%20have%20a%20back%20button.%20We%20decided%20to%20check%20it%20in%20like%20this%20so%20we%20could%20get%20early%20user%20feedback.%20To%20clarify%20your%20comment%20on%20back%20compat%3A%20do%20you%20mean%20we%20are%20not%20compatible%20because%20now%20there%20are%20two%20back%20buttons%20for%20some%20apps%2C%20or%20do%20you%20mean%20we%20are%20not%20compatible%20because%20this%20actually%20breaks%20some%20apps%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20the%20former%3A%20we're%20definitely%20concerned%20for%20that.%20It%20might%20be%20good%20to%20enable%20the%20media-query%20and%20make%20it%20hidden%20by%20default%2C%20then%20drive%20the%20choice%20via%20the%20manifest...%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3EIf%20the%20latter%3A%20If%20you%20can%20point%20to%20an%20app%20that%20is%20broken%20because%20of%20this%2C%20I'd%20love%20to%20have%20that%20information.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%20again%2C%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-730105%22%20slang%3D%22en-US%22%3ERe%3A%20UI%20in%20standalone%20mode%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-730105%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F318459%22%20target%3D%22_blank%22%3E%40johnjansen%3C%2FA%3E%26nbsp%3BThank%20you%20for%20the%20clarification.%3C%2FP%3E%3CP%3EOf%20course%2C%20it%20does%20not%20break%20anything.%20It's%20just%20about%20the%20user%20experience%2C%20a%20double%20navigation%20UI%20adds%20confusion%20and%2C%20as%20you%20said%2C%20currrently%20webauthor%20doesn't%20have%20any%20way%20to%20hide%20it.%3C%2FP%3E%3CP%3EPerfect%20webauthor%20experience%20would%20be%3A%20%60hide%60%20as%20a%20default%20and%20give%20a%20way%20to%20show%20it%20if%20needed.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAbout%20display%20mode%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.w3.org%2FTR%2Fappmanifest%2F%23display-modes%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.w3.org%2FTR%2Fappmanifest%2F%23display-modes%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EStandalone%20description%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E%22the%20user%20agent%20will%20exclude%20standard%20browser%20UI%20elements%20such%20as%20an%20URL%20bar%2C%20but%20can%20include%20other%20system%20UI%20elements%20such%20as%20a%20status%20bar%20and%2For%20system%20back%20button%22%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eminimal-ui%20description%20says%3A%3C%2FP%3E%3CP%3E%3CSPAN%3E%22A%20user%20agent%20can%20include%20other%20platform%20specific%20UI%20elements%2C%20such%20as%20%22share%22%20and%20%22print%22%20buttons%20or%20whatever%20is%20customary%20on%20the%20platform%20and%20user%20agent.%22%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ESo%20translation%20button%20(even%20password%20manager%20button)%20shouldn't%20be%20part%20of%20the%20app%20UI%20in%20standalone%20mode.%20standalone%20mode%20should%20hide%20every%20UA%20specific%20UI%20(three%20dot%20menu%20excluded)%20except%20if%20the%20webauthor%20allow%20it%20via%20the%20webappmanifest%20or%20via%20media%20query.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20%22%3CSPAN%3Ecan%20include%20other%20system%20UI%22%20in%20the%20'standalone'%20description%20would%20lead%20'standalone'%20to%20be%20a%20'minimal-ui-light'%20mode.%20But%20it's%20probably%20better%20to%20discuss%20it%20on%20webappmanifest%20spec%20side.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
frlinw
New Contributor

Im a little concerned about changes of the desktop app UI.

 

You introduced a back button even though the `navigation_ui` is (not yet) a part of the manifest spec

https://github.com/w3c/manifest/pull/766

Most of apps are built with an implementation of navigation UI (because of the lack of native support or for a better UX).

In standalone mode, the `navigation_ui` should be `hide` as a default (for backward compatibility).

If you argue 'there is an arrow in apps installed from the Microsoft Store', you should now the web is about backward compatibility, your product should be aligned with the web, not the other way around. 

 

Moreover, `translate` button does not adapt its color to the `theme_color` but the main concern here is the app bar starts to be bloated with non-critical action buttons.

Translation should be part of the `three dot menu` as it's not an usual action. The webappmanifest fixes the language with the `lang` property and can support internationalization internally if needed. Translation is a UA service and shouldn't be promoted as part of the app UI.

 

edge_standalone_ui.jpg

 

 

 

Note: there is a misalignement of the arrow in fullscreen

fullscreen_arrow_alignement.jpg

 

2 Replies

@frlinw thanks for the feedback on App UI. 

 

We made an additional small change to the back button, just to be complete: in current canary, the backbutton will disappear when there is no history; we took feedback on that and now it is visible but disabled when there is no history.

 

We do plan on having the ability to use a media-query if the app would like to hide the button because they may have implemented their own. That is not in yet.

 

We are in discussion currently with Google about back compat and whether standalone mode should have a back button. We decided to check it in like this so we could get early user feedback. To clarify your comment on back compat: do you mean we are not compatible because now there are two back buttons for some apps, or do you mean we are not compatible because this actually breaks some apps?

 

If the former: we're definitely concerned for that. It might be good to enable the media-query and make it hidden by default, then drive the choice via the manifest...


If the latter: If you can point to an app that is broken because of this, I'd love to have that information.

 

Thanks again,

@johnjansen Thank you for the clarification.

Of course, it does not break anything. It's just about the user experience, a double navigation UI adds confusion and, as you said, currrently webauthor doesn't have any way to hide it.

Perfect webauthor experience would be: `hide` as a default and give a way to show it if needed.

 

About display mode:

https://www.w3.org/TR/appmanifest/#display-modes

 

Standalone description:

"the user agent will exclude standard browser UI elements such as an URL bar, but can include other system UI elements such as a status bar and/or system back button"

 

minimal-ui description says:

"A user agent can include other platform specific UI elements, such as "share" and "print" buttons or whatever is customary on the platform and user agent."

 

So translation button (even password manager button) shouldn't be part of the app UI in standalone mode. standalone mode should hide every UA specific UI (three dot menu excluded) except if the webauthor allow it via the webappmanifest or via media query.

 

The "can include other system UI" in the 'standalone' description would lead 'standalone' to be a 'minimal-ui-light' mode. But it's probably better to discuss it on webappmanifest spec side.

 

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
22 Replies
flashing a white screen while open new tab
cntvertex in Discussions on
13 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
28 Replies
description for autoplay blocking in settings page
HotCakeX in Discussions on
8 Replies