Silica tab component

asked 2015-07-05 16:08:45 +0300

Toxip
3363 ●39 ●61 ●56

updated 2016-10-24 13:03:15 +0300

The sailfish silica needs a tab component. Currently silica supports only list and menu based navigation but many apps require a flat navigation hierarchy. The lack of official silica tab component has caused many developers to resort on their own implementations of tab components, which often don't work well with other silica components.

Pros

User always knows where they are
User immediately knows where they can navigate
Possible to notify the user about new updates on each tab
Faster navigation between views (1 tap/swipe as opposed to 2)
Complements the gesture based UI
Flattens the navigation hierarchy into a more accessible format

Cons

Takes some space on the page

When to use it?

When you have 3-5 pages with a lot of information to display

Tabs could use the same familiar little light ball as with the page navigation for showing the current tab. Jolla tabs mockup

The light ball would move over the next tab icon when changing tabs and give a hint for the user about the transition. Tabs transition

Tapping an item could navigate to a new page as usual. The transition would give the user a cue that they're moving away from the tabs view. image description

Tabs should only be used when there are no other pages on the page stack. Tabs should not be used when swipe between tabs would conflict with other gestures such as navigate backwards/forwards. image description

EDIT: Here is some evidence about the effect on engagement when tab bar is used: link text. Pulley menu, or a navigation page are similar to hamburger menus in that they are not visible to the user. Also, many app developers seeking to port applications to the platform might face this issue of a lacking essential component.

edit retag flag offensive close delete

Comments

I'm not sure I understand. When would you need such a component? I've seen a tab-like UI once and it felt out of place. It was nothing that couldn't have been placed in one longer flickable page... or in 2 pages if the author wanted to avoid scrolling. Tabs work so completely against the philosophy of the Sailfish UI, they shouldn't be encouraged.

ossi1967 ( 2015-07-05 17:22:09 +0300 )edit

1

nothing stopping a developer pushing several pages onto the stack and persisting them as a tab-like structure. Navigation by scrolling left and right.

r0kk3rz ( 2015-07-05 17:51:03 +0300 )edit

@r0kk3rz that is indeed possible it has a drawback. The user doesn't know where on the stack and has to learn where each page is. With a proper tab bar, you can see where you are and wont get lost. HN app is an example on how bad ux that is.

Toxip ( 2015-07-05 19:10:16 +0300 )edit

@ossi1967 I don't see how tab bar is the SFOS philosophy. Quite the contrary, they would fit well in the gesture centric UI. You could swipe left and right to switch between the tabs.

Toxip ( 2015-07-05 19:20:23 +0300 )edit

@Toxip and this left- and right-swipe will be mixed up with back/forward gestures. However, I think SimpleWeather with multiple cities is a good example.

AliN ( 2015-07-05 22:28:49 +0300 )edit

1

answered 2015-07-06 11:37:21 +0300

chemist
41469 ●392 ●542 ●615

moderator

http://talk.maemo.org/

updated 2015-07-06 14:16:34 +0300

IMHO I'd like it much more without actual tabs.

My idea be that pages can have specific types of dots(icons instead of dots) indicating what is stacked left and what is coming to the right. So an enhancement to the current page indicator, not a tab-bar!

edit flag offensive delete publish link

Comments

could you elaborate this a bit? I'm not sure if understand what you're after.

Toxip ( 2015-07-06 12:27:21 +0300 )edit

1

sounds like a return to what we used to have Pre-Uitukka, with multiple dots on the left and right edge which showed where in the page stack you were (example), but instead of generic dots, maybe little icons that show what those pages are.

r0kk3rz ( 2015-07-06 12:32:18 +0300 )edit

@Toxip what @r0kk3rz said - possibility to assign icons to pages instead of just showing dots, and yes return to pre-Uitukka, that is needed anyway (not knowing how deep you are in pages slows me down)

chemist ( 2015-07-06 14:14:50 +0300 )edit

@chemist I disagree. The current system gives a stronger visual cue for the user that it is possible to swipe left or right. The breadcrumbs was indeed handy but didn't have as strong a visual cue as the new system, which is why they changed it. Replacing the dots with icons would make it even more confusing since they could be mistaken for buttons.

Besides, the navigation hierarchy should never be so deep that the user gets lost.

Toxip ( 2015-07-06 14:45:22 +0300 )edit

@Toxip but that is what you are asking for... well I rethought it to fit the design as a tab-bar is bloat, and I do not understand how "more hidden" indicators are better to understand?! Dots that add up from the right to a stack on the left are like sheets of paper I still see the amount of pages - and it actually used to be buttons for those people not getting the gestures in the first place, which is good for new users unfamiliar with gesture interfaces. Now what does a tab-bar look like if not buttons? New users will be pissed if they do not also act as buttons. How deep navigation hierarchy goes depends on the task/use-case. What you are referring to is the dots, I was actually talking about how to make a tab-bar not being a tab-bar with the design idea of the initial dots and have it implemented like the same

chemist ( 2015-07-06 15:48:10 +0300 )edit

1

answered 2016-11-15 12:39:36 +0300

itdoesntmatt
678 ●9 ●17 ●15

we really need a sort of this implementation or alternative one in Silica. Apps with a lot of potential options (eg sailorgram) are too strict with just pulley menu..

edit flag offensive delete publish link

Comments

Sailorgram doesn't necessarily need one since the Telegram one doesn't either. There are only a few options that it needs and they should fit nicely in pulley.

Toxip ( 2017-10-23 08:03:32 +0300 )edit

0

answered 2015-07-06 04:41:58 +0300

BirdZhang

1211 ●27 ●40 ●44

http://www.birdzhang.xyz/

You need SlideshowView :)

Checkout :https://github.com/steffen-foerster/sailfish-barcode/blob/master/qml/pages/SettingsPage.qml

edit flag offensive delete publish link

Comments

1

This application is a particularly bad exaple: There's no need for this complicated structure in the UI at all, it would have been better to have all the settings in one page.

Come think of it it's a very good example of why you shouldn't translate known UI concepts 1:1 to sailfish ;)

ossi1967 ( 2015-07-06 10:25:11 +0300 )edit

1

This is an example of how not to do it... The tab bar should only be on the main page and the page shouldn't have any other pages on the stack unless when you tap on something. It shouldn't be used when it's conflicting with navigate back or forwards gesture.

Toxip ( 2015-07-06 12:15:44 +0300 )edit

Silica tab component

Comments

3 Answers

Comments

Comments

Comments

Question tools

Stats

Related questions

Silica tab component

Comments

3 Answers

Comments

Comments

Comments

Question tools

Public thread

Stats

Related questions