10

In my iOS app, I have an extra toolbar that appears above the keyboard, using the same style of buttons as the keyboard. This toolbar is horizontally scrollable.

Currently, in all devices and orientations, I make sure that half a button is always hanging off the edge, to indicate there is more to see, however after discussion with users, a lot of them are unaware that the toolbar scrolls. How can I indicate this area is scrollable?

enter image description here

(Note, in the actual app these buttons have labels)

Here's what I went for in the end:

enter image description here

Improve this question
2
  • I would seriously reconsider your approach of using the same style buttons as the keyboard. This would confuse me and I think the issue you are facing in indicating this area as scrollable is a deeper problem with the button style choice. Have you tested this with any users?
    – DigiKev
    Jan 20, 2012 at 22:30
  • Yes. The extra buttons are keyboard keys that are not present on the iOS keyboard(s).
    – fredley
    Jan 21, 2012 at 0:27

7 Answers 7

Reset to default
16

Fade out the edge that wraps (as well as leaving the button hanging over the edge so that it's clearer that there is more unseen content. Clearer because not only is what is off screen not visible but a little bit of what is on screen is not visible as well.

enter image description here

Alternatively try and make out that it's like a conveyor belt or something that physically wraps round the corner or round the back.

enter image description here

And then you can do that on both sides if you have scrolled towards the middle and have content of of both ends.

enter image description here

And then remove it from the other end when you have scrolled to the other end.

enter image description here

Suitability of the conveyor belt metaphor

I would imagine the main interaction with this mechanism being via a left to right drag/swipe rather than via a tap on the left to right arrows. You may find that users might tend to tap the arrows before they discover the swipe gesture (depends on the user obviously) so it may be beneficial to make the arrows larger (more tap-able) and also to use icons which signify not only the direction of extra content but that it can be accessed via a swipe. (eg Luke Wroblewski's touch gesture guide)

There are some comments about breaking of design principles and scope for confusing the users. I would strongly suggest that in order to determine whether this mechanism is indeed suitable or confusing, then if being considered, the idea should definitely be tested with real users before release - as always.

Wrapping the content?

You or others may consider having it so that you always have this mechanism visible at both ends and actually allow the content to wrap back in from either end - but this would depend on how many items you have and whether it makes sense in your scenario.

It might be useful for example if you have some ordered content and it's significantly easier to wrap from the end over to the beginning again rather than have to scroll all the way back to the other end.

That sort of thing always infuriates me on things like personal video recorders where you can scroll though a list of recordings but to get back to the top you have to go all the way back up with about 50 clicks of a button, but I know it's not suitable for all situations!

But... Do consider if the scroll mechanism is really needed

All the above addresses the specific question as asked (ie wrt to making the buttons look more scrollable). I do wonder though, if the mechanism is even needed.

You've mentioned the extra keys are for keyboard keys not found on the iOS keyboard (for which reason I see absolutely no problem in using the same design as the rest of the keyboard, by the way).

It's worth checking out iA Writer shown below and which has had some excellent reviews - Eric Speikerman saying it was the best app on his iPad. Why - because it focuses on simplifying the task in hand - the writing.

iA Writer manages with just a handful of extra keys - including the very useful (larger) arrow keys. I'm sure iA could have added more keys, but retaining simplicity was clearly top priority in this beautifully designed app.

enter image description here

It's also worth noting from the perspective of visual appeal how iA Writer's top bar has the keys overlapping keys in the next row - rather than being aligned with them. This would be recommended in order to continue the flow of the visual design and blend more easily from the built in keyboard into the additional row. Even if you do use a scrolling mechanism. I'd suggest ensuring the overlapping design is retained. iA Writer has a pair of larger abutted keys which allow the design to reach the left and right extents without leaving unsightly gaps.

Improve this answer
4
  • 3
    Speaking from my own experience, I find wrapping scrolling (as opposed to a selection cursor which jumps back to the top) is a bad idea because it reduces the feeling of the location of each button, and it's unnecessary when you have flick-scrolling to get to either end fast.
    – Kevin Reid
    Jan 20, 2012 at 15:02
  • 1
    I am not a fan of this approach, not only does it look broken in design, because the interface is using buttons that look like the keyboard (which is hyper-realistic of an actual Apple keyboard), this could never happen for real. All design principles are broken, and this will likely confuse the user.
    – DigiKev
    Jan 20, 2012 at 22:32
  • @DigiKev I don't think I am either really - and although I initially concentrated on the question as asked (better indicating the scrolling), I'd much rather try and avoid the need for scrolling at all and see something like iA Writer as mentioned in my extended answer above.
    – Roger Attrill
    Jan 22, 2012 at 19:32
  • 1
    @RogerAttrill the extra additions you have added since my comment are much more valuable in answering this question. Thank you for revisiting it. Personally, if I find the question as asked has an inherently deeper problem, I prefer to explain these issues and provide a suitable alternative.
    – DigiKev
    Jan 22, 2012 at 20:09
7

For me, the approach you have used for having icons scroll along a UI item that looks like part of the keyboard (a real-world item) does not work. A keyboard in real life does not have a revolving panel, so the fact that you are trying to create something that looks like a real-world item, and then make it do something that wouldn’t happen in real life, will confuse users.

It will be much better suited to create a panel that contains the icons, with an indicator of how many extra sets of icons are available with arrows indicating that you can scroll through to another set. Here is a very quick and rough example to communicate this:

Scrolling UI example

Other considerations you should think of are removing or disabling the arrow button when you are on the farthest left or right page (for want of a better word), like so:

Extra considerations on UI

It could possibly be an annoyance to have to scroll through multiple pages to find the icon you want, so you may wish to factor in an ability to reorder the icons, or at the very least work with users to make sure most used items are on the first page.

Improve this answer
3
  • Great considered alternative to Roger's suggestion!
    – Rahul
    Jan 22, 2012 at 17:36
  • My keys are extra keyboard keys (e.g. F1, F2, Win, Cmd) that are not available on the iOS keyboards, so this is not so appropriate.
    – fredley
    Jan 22, 2012 at 22:02
  • @fredley do you think you would be able to provide us with the labels/icons for the buttons, how many there will be and how each will operate? We could then probably come up with a more fitting answer.
    – DigiKev
    Jan 23, 2012 at 8:34
3

When your view first appears, flash the toolbar's scroll bar using flashScrollIndicators. This gives a visual indication to the user that the area is scrollable, without taking up any screen space. (This is a common iOS behavior and can be found in almost all apps, including Mail, Safari, etc.)

Improve this answer
0
2

You should reference the Apple Human Interface Guidelines on this one. However I would replicate the same process users are used to on the home screen.

The little dots that flip the sections over entirely.

If you don't have enough content to do an entire content swipe, I would then go with the next best Apple UI for extra content and use the scroll bar. Have it appear signifying there is more content.

Improve this answer
1
  • The dots that flip go against the scrolling horizontally, as they would have to go bunch by bunch..
    – Tarek
    Jan 21, 2012 at 9:26
2

IOS made a clear choice to mimick a physical keyboard (or at least a discrete set of keyboard layouts). Notice that there isn't even animation when switching to numerical keypad eg.

So either follow the behavior of the iOS keyboard: discrete fixed layouts with keys to switch to alternative layout with other keys.

Or make your custom keys look significantly different. If you insist on scrolling, I would not even imitate physical buttons.

Improve this answer
1

Stick big floating arrows on either end of it ?

Then make it scroll if you click on the left or right arrow.

Improve this answer
0

In iOS human Interface Guidelines, there is recommendation how to deal with long navigation bars, i think we can use same icon/experience here:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.