1

Having a little bit of struggle while designing a iOS app. What do you think is the right position for progress indicator - right or left side of text?

Checking for updates... loading animation

or

loading animation Checking for updates...

In Apple HIG they still have indicator on the right side of text, yet since iOS 11 they moved it to the left side.

For me the right side is a better choice - it appears more optically balanced and I know what is happening and then that it's still happening, rather than that something is happening and then figuring out what. On the other hand, Apple uses the left side indicator in system settings (SW update) and apps (Maps).

closed as primarily opinion-based by Shreyas Tripathy, locationunknown, Matt Obee, JohnGB Feb 21 at 9:00

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Show it below, problem solved :) Also remove the triple dots (...) they are kind of a static progress indicator. No need for them when you have the animation – Anders Feb 18 at 14:57
2

Considering left-to-right mentality, I think, the difference is this:

If it’s to the left, the user will read it as “we’re working, and here’s why...” - they’ll “read” the indicator first and then, if confused or interested, the description for it that will clarify what’s happening.

If it’s to the right, the user will read it as “we’re doing this and this, a here’s the indicator to show that we’re still doing it” - they’ll read the description, and the indicator will assure them that it’s still going.

So, to me it seems you have to use whichever case suits your message to the user best and go with it. Note, that for RTL languages it’s the other way around.

1

Like exp mentioned in the other answer, both the approaches have different narratives that makes sense. Adding to that:

Visual designer can direct the flow of reading in a correct way. Though having an icon to the right may appear optically balanced, the reading flow will be broken because of the bold stroke, dark colored icon. Adding to it the animation amplifies the attention.

For LTR, having icon to the left side of text is a safe side approach. There are certain exceptions like for example Animating the ellipsis of 'Checking the updates... '. I created a small image explaining my thoughts:

enter image description here

0

Ideally, I'd consider putting the activity indicator in the center of the view, with the text 20-30pt below it. This is mostly something I try to follow by convention and if there are no other patterns implemented.

Is the activity indicator fading in & out of the view if the content is being loaded? If the response time is acceptably fast (under 2 seconds), is it worth showing the "Checking for updates" text?

  • Unfortunately can't do this, there is no space for two line indication. Indicator is simply on screen, replacing user input that is being sent to server, so this indication is visible up to timetout (10s) – Wreis Feb 14 at 9:00
0

Considering the reading practice of the user. The users will read from left to right. So showing a loader before the user starts to read is the best experience from my perspective.

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