Remove BottomEdge swipe feature

[ivoxavier]

Hi,

With today update the clock UI became a bit awkward, having an arrow between icons and does not remain when we're at stopwatch page. The top icons for push pageStack were moved for bottom (wish I consider a great move btw), although I think the alarm page could also have an icon instead of the swipe form button feature. Yeah, like iPhone clock app. Example: http://cdn.appstorm.net/iphone.appstorm.net/files/2011/02/clock.jpg

If this is already in plan, please delete this issue.

Thanks for your time and work! :)

[dark-eye]

@ivoxavier Yeah i thought about how it should be handled maybe this issue could be a start of a design discussion (though it`s hard to entice discussions in github...) i am thinking about moving it when we do the convergence redesign (the clock app is not very convergence friendly right now) or maybe keeping it always accessible.

( too bad github doesn't habe polls :( )

[p-mitana]

This is one of the reasons why in my opinion tabs should not have been moved to bottom. Bottom navigation in the way it is has been introduced doesn't match Suru's models for me.

The bottom edge for alarms is handy, I really like it. My opinion is that it shouldn't be removed, but the tab should be reverted to the top.

Alternatively, as mentioned, the button could be an option. But still - it is a design problem across the core apps in general - and I think that either the bottom navigation has to be rethought to play well with the bottom edge (or possibly the bottom edge hint can be changed - or alternative version for it can be introduced, when the bottom edge navigation is active) - or not used at all.

I believe that the proper design process with prototyping, discussing options and Suru guidelines is required in this topic.

Other note: the clock is now very close to the top edge. For me it needs more margin, at least to be laid lower then the top-right-corner icons.

[dark-eye]

I agree that currently the bottom navigation and the bottom edge collapsed hint are a little awkward. how ever i don't think that is a case for eliminating the navigation altogether or moving back to a top navigation, as phone user it make using the application a lot smoother and easier (especially on large phone as one plus and Meizu pro) this is also true for the bottom edge which i too quite fond of.

We do need to find a way to make them both work, maybe by moving the navigation a bit higher or maybe to never collapse the bottom edge all the way so instead of the arrow hint you`ll have a bar with the "alarms" title on it.

@the-Mitu About you're other note i think you're right i`ll move it a little further from the top.

[sverzegnassi]

Throwing a few cents into the discussion

The bottom bar navigation has been firstly introduced in OpenStore to solve an existing issue, when we added new ways for browsing the app store content (i.e. categories, and search).

We followed the Suru specs, where they prescribe to use the Sections component "for sub-navigation or filtering within the screen[1]". Our choice has been to move categories into an hamburger menu. That didn't worked well, and categories went mostly ignored.

That's when we took the opportunity to flatten the top level navigation flow, and introduce the bottom navigation.

I'd like to argue the other side of the question, and note that the UITK BottomEdge has some discoverability issue. The "Alarms" label is visible for a limited amount of time, and the related page is currently considered a sub-page of "World Clock". A common pattern is to consider "Alarms" as a top level destination, alongside World Clock, Timer, and Stopwatch (see iOS, Android, GNOME).

In regards of the Suru specs, for the top level navigation, they don't strictly impose any pattern on the position and interaction model. The only existing recommendation is:

If you choose not to have a header, then think of how users will navigate through your UI in a different way.

I'd like to hear more voices on this topic, and I believe we could revert the change if there will be a shared consensus.

[1] https://docs.ubuntu.com/phone/en/apps/design/patterns/navigation

[sverzegnassi]

In case we will stick to the current solution, we might need some adjustment. Apart the missing top margin which is required, the following changes might also be desirable:

• Align the bottom navigation to the specs used in OpenStore and/or create a new shared component
  • Always show labels for bottom tab buttons, even if the tab is not highlighted
  • Move Alarms view into the bar
  • Save the status of the view when the app is closed, in order to show the last opened tab when users relaunch clock-app

[p-mitana]

• I'm for moving the alarms to the separate tab. Even more - making it the first one. For sure alarms are the most used functionality of the clock app - and probably world clocks are the least.
• Saving state needs an option for me - some people will not want it to be saved (for example me)
• Definitely names of all tabs should be visible.

I'd also suggest a slight redesign of the UI, which will in my opinion look better:

• To be consistent with the rest of tabs, alarms tab will need a clock in the top. Under the clock the date should be displayed, but not the location.
• I think that the header should be added, with the name of the current tab and plus button for alarms/world clock (to make them consistent) - plus button should be ordered before the settings menu (consistency with other apps, eg. messaging app)
• I would remove "app info" button and move it to the settings menu

I still feel like I prefered the tabs at the top as it was before, but as it seems like I'm in the minority, I'll probably have to accept the bottom navication in Ubuntu Touch. But it definitely needs to be standarized, introduced into SDK and made play nice with the bottom edge hint (possibly move the hint closer to the bottom edge and increase margin for bottom navigation).

[ivoxavier]

Another appointment for this. Today I was at the stopwatch page then I was trying to go to the alarm page by just swipe from the bottom, its impossible. We can only do it if we are at the alarm page. Not very friendly user experience, and not intuitive.

@sverzegnassi, also the label of "places" in weatherApp behaves in the same way of clockApp.

[dark-eye]

Hey, I apologize for the long response time it took me a while to get enough free time lately...

It seems that were advancing to a nice design I`ll generate a mock-up of the points above just to see if the separate alarm page works and easier then the bottom edge, which will include the following points :

• align bottom edge to open store specs (i think it`s quite close as it is anyway).
• Always show labels for bottom tab buttons
• Move Alarms view into the bottom navigation bar
• Save the status of the view when the app is closed based on the user settings default to off (right now to not change too much on the users)
• alarm page same as today without any redesign changes to keep mockup focused no th separate page vs bottom edge change

About the redesign of the alarm page I would like to suggest a few options :

• or top clock in the alarms tab will be changed to be a new alarm creator (shaped as the clock).
• or top clock and since there will be no icon above the bottom hint after we will add the alarms tab to the navigation bar we can use the bottom edge now to create a new alarm without the bottom edge confusing the user.
• or keep the top section of the clock page in view and just swipe the world clocks list and the alarm lists adding alarms the same way you add a world clock
• or keep the same full page list as we have right now and the top add button.

Here is the current version to compare against.

@the-Mitu I'm really just trying to get to a good design if the top navigation would provide an actual accessibility/discernibility improvement then I think it would be the better choice, but as it is it basically unusable on large screen devices with one hand , i'll also provide a mock up with the navigation bar at the top so we can compare , It's here just to check usably (still have the bottom navigation design) if everybody would like this design then we can revert to top bar and then we just need to solve the issue that @ivoxavier mentioned.

Hope to finish all the work by the week end...

@ivoxavier Yes, i noticed that myself that should be solved if will move it to it`s own page alternatively we can keep it accessible from all the pages as neither the timer or the stopwatch has bottom edges.

(BTW if i`m wasting everybodys time please tell me :) )

[dark-eye]

OK I did some experiments and landed on what i think can be a ggod solution to this issue :

• I've move the navigation bar back on top
• and instead of navigation i added a space in the bottom to allow for swiping

This should keep the look of the top bar navigation but will not require large screen device user to break their thumbs when switching between pages, and the bottom hint will not be confusing.

If you like you can try it here

[mymike00]

this can be closed as the navbar has been moved back to the top in the header