Back button #6

Closed
opened 2015-09-17 20:46:02 +00:00 by mdibaiee · 18 comments
mdibaiee commented 2015-09-17 20:46:02 +00:00 (Migrated from github.com)

Currently, the only ways to navigate back are swiping (which most people are unfamiliar with) and clicking on breadcrumb (which has usability issues such as small tap area, and people are unfamiliar with, again).

I'd like to have a back button but I'm not sure where to put it, any ideas appreciated @nt1m @Sergio-Muriel

Currently, the only ways to navigate back are swiping (which most people are unfamiliar with) and clicking on breadcrumb (which has usability issues such as small tap area, and people are unfamiliar with, again). I'd like to have a back button but I'm not sure where to put it, any ideas appreciated @nt1m @Sergio-Muriel
nt1m commented 2015-09-17 20:59:52 +00:00 (Migrated from github.com)

You could put a small up button on the left of the breadcrumbs, kinda like Windows Explorer's navigation bar. Not sure if it looks cluttered though.

You could put a small up button on the left of the breadcrumbs, kinda like Windows Explorer's navigation bar. Not sure if it looks cluttered though.
mdibaiee commented 2015-09-18 11:25:41 +00:00 (Migrated from github.com)

That's exactly what I thought, but there is a problem with that, because breadcrumb's tap area is small, and there is navigation drawer on top if, it's going to be annoying, I tested it.

That's exactly what I thought, but there is a problem with that, because breadcrumb's tap area is small, and there is navigation drawer on top if, it's going to be annoying, I tested it.
mamal72 commented 2015-09-18 11:38:48 +00:00 (Migrated from github.com)

Well, you can put a ".." with a different folder icon (maybe a folder icon with an arrow on it) on top of files and directories list. I think it can be good and looks better than a small button before breadcrumb, Hm? 😃

Well, you can put a ".." with a different folder icon (maybe a folder icon with an arrow on it) on top of files and directories list. I think it can be good and looks better than a small button before breadcrumb, Hm? :smiley:
mdibaiee commented 2015-09-18 11:40:16 +00:00 (Migrated from github.com)

@mamal72 that's a good idea, too. But normal users are not familiar with that concept, I think. Your idea would work for geeks tough 😀

@mamal72 that's a good idea, too. But normal users are not familiar with that concept, I think. Your idea would work for geeks tough :grinning:
mamal72 commented 2015-09-18 11:43:30 +00:00 (Migrated from github.com)

That's why we should use a different icon on it. 😄
A folder icon with a round counter clockwise arrow can be a good hint for them.
And you can mention it in the tour too.

That's why we should use a different icon on it. :smile: A folder icon with a round counter clockwise arrow can be a good hint for them. And you can mention it in the tour too.
mdibaiee commented 2015-09-18 11:45:44 +00:00 (Migrated from github.com)

Hmm, you're right, probably an icon would demonstrate how it's going to work. What do you think @nt1m ?

Hmm, you're right, probably an icon would demonstrate how it's going to work. What do you think @nt1m ?
mamal72 commented 2015-09-18 12:06:08 +00:00 (Migrated from github.com)

You can also use something like "UP" instead of that ".." with an up arrow icon.
I think the worst part of this method is where user goes to other views. In the list view it looks good but in the tile or thumbnail view (which I think you may implement it) it doesn't look as good as list view. But it's still the best way in my opinion. We have no toolbar or anything like that.
You can also improve breadcrumb interface and give it more height. This way, you can have a good, usable breadcrumb, a back button before it and an addition toolbar space after breadcrumb which you can use it later to place stuff. But you'll lose the precious screen space. 😒 There's a lot of FFOS devices with small screens compared to other smartphones.

You can also use something like "UP" instead of that ".." with an up arrow icon. I think the worst part of this method is where user goes to other views. In the list view it looks good but in the tile or thumbnail view (which I think you may implement it) it doesn't look as good as list view. But it's still the best way in my opinion. We have no toolbar or anything like that. You can also improve breadcrumb interface and give it more height. This way, you can have a good, usable breadcrumb, a back button before it and an addition toolbar space after breadcrumb which you can use it later to place stuff. But you'll lose the precious screen space. :unamused: There's a lot of FFOS devices with small screens compared to other smartphones.
mdibaiee commented 2015-09-19 12:57:30 +00:00 (Migrated from github.com)

I added a back button to breadcrumb for now, may you please test it on a real device to see if there are any issues with touching it, I tried to move the navigation drawer's touch area a little away from breadcrumb. @nt1m

I added a back button to breadcrumb for now, may you please test it on a real device to see if there are any issues with touching it, I tried to move the navigation drawer's touch area a little away from breadcrumb. @nt1m
nt1m commented 2015-09-20 11:47:33 +00:00 (Migrated from github.com)

@mdibaiee Works fine to me, one issue though, the back button doesn't get disabled when you're already in the top level dir.

@mdibaiee Works fine to me, one issue though, the back button doesn't get disabled when you're already in the top level dir.
nt1m commented 2015-09-20 11:51:48 +00:00 (Migrated from github.com)

Also, I have no trouble touching the icon. It'd be nice to have some touch feedback (for all buttons) though.

Also, I have no trouble touching the icon. It'd be nice to have some touch feedback (for all buttons) though.
mdibaiee commented 2015-09-20 12:47:19 +00:00 (Migrated from github.com)

@nt1m Great, I'm going to work on a better visual for the back button

@nt1m Great, I'm going to work on a better visual for the back button
nt1m commented 2015-09-20 15:04:04 +00:00 (Migrated from github.com)

"Also, I have no trouble touching the icon."
Actually, I can accidently hit the menu button when using my thumb

"Also, I have no trouble touching the icon." Actually, I can accidently hit the menu button when using my thumb
mdibaiee commented 2015-09-23 21:29:22 +00:00 (Migrated from github.com)

@nt1m Do you think the touching UX is good enough to be released? Or is it too annoying, if so we have to change strategy, probably.

Another possible solution would be placing a back button in the bottom toolbar, probably moving the "view" button to drawer, with radio boxes just like the Filter section, what do you think?

@nt1m Do you think the touching UX is good enough to be released? Or is it too annoying, if so we have to change strategy, probably. Another possible solution would be placing a back button in the bottom toolbar, probably moving the "view" button to drawer, with radio boxes just like the Filter section, what do you think?
mdibaiee commented 2015-09-26 17:26:46 +00:00 (Migrated from github.com)

@jorrete Do you have any idea on this topic? I would love to hear from more people.

@jorrete Do you have any idea on this topic? I would love to hear from more people.
jorrete commented 2015-09-26 17:59:57 +00:00 (Migrated from github.com)

Other option would be:
| (back) Hawk (google)(breadcrumb)|

Hawk is centered and whenever you need back button you set visible the back arrow.

Other option would be: | (back) Hawk (google)(breadcrumb)| Hawk is centered and whenever you need back button you set visible the back arrow.
mdibaiee commented 2015-09-27 15:11:15 +00:00 (Migrated from github.com)

I changed the breadcrumb's style as suggested by @mamal72, I think I'm going with the plan to put back button in the bottom toolbar and move views to navigation drawer, seems to be our best bet right now.

screen shot 1394-07-05 at 18 43 06
I changed the breadcrumb's style as suggested by @mamal72, I think I'm going with the plan to put back button in the bottom toolbar and move views to navigation drawer, seems to be our best bet right now. <img width="318" alt="screen shot 1394-07-05 at 18 43 06" src="https://cloud.githubusercontent.com/assets/2807772/10123481/7b6653e6-6547-11e5-8813-a6d58e3459f6.png">
mamal72 commented 2015-09-27 17:00:22 +00:00 (Migrated from github.com)

I changed the breadcrumb's style as suggested by @mamal72

Looks so good to me. I wish I could test it but I've no device to test. 😒

> I changed the breadcrumb's style as suggested by @mamal72 Looks so good to me. I wish I could test it but I've no device to test. :unamused:
mdibaiee commented 2015-09-28 16:42:07 +00:00 (Migrated from github.com)

This is how it looks now:
screen shot 1394-07-06 at 16 34 32

This is how it looks now: <img width="319" alt="screen shot 1394-07-06 at 16 34 32" src="https://cloud.githubusercontent.com/assets/2807772/10142067/2f8f9618-661d-11e5-9890-0de26195e1d1.png">
Sign in to join this conversation.
No Milestone
No project
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: thereadme/Hawk#6
No description provided.