Archives For May 20, 2013

As I’ve admitted before, my design skills are self-taught and often acquired by just looking carefully at the design elements of some of the best apps that are out there.  One thing that has been bothering me lately is the intuition behind shifting UI elements – or the fact that I don’t get it.  Take the new G+ layout, for instance.  Here is a view of the G+ layout while scrolling down:


The first one is the default view upon visiting the G+ site and the second is the view upon scrolling down a bit.  I’ve been thinking about what bugs me there and realized it is the shift in UI elements that occur.  A couple of things happen there – the home icon gets replaced by the G+ symbol (but they both do exactly the same thing!); and the notifications indicator moves from the top area to the bar below.  Both these need not actually shift at all – for e.g., the default look of that bar can be that of the second image above.  When this kind of a shift happens while scrolling, it gives the illusion that something has changed and draws attention to the shifting element.  When the user realizes that nothing has changed, it is quite annoying.  It just shifted my attention to an element for no apparent reason, causing me to lose my focus on whatever I was looking at earlier!

I take the example of the web interface here, but the same is true on the mobile.  In fact, it is more pronounced there.  Some apps bring up certain UI elements only while scrolling up or down and it is quite distracting.  Scrolling up on the G+ Android app brings up a bottom bar:


What is it about scrolling up that suggests a user intent of wanting to do any of those four actions in the bottom bar?

I’m not trying to pick on G+ here – there are other apps that do this as well.  Pulse did this for a while where scrolling up would bring up options to share a post.

When such appearances of UI elements are tied to specific actions (such as scrolling in a particular direction) that are not necessarily indicative of associated user intents, it is confusing and distracting.

UI elements, down to every last detail, must be carefully thought out.  Especially on the mobile screen, where such shifts have a high impact on user attention, it is crucial that we debate the details of the design to every last bit.

It is possible I don’t get the idea behind these shifting UI elements and I’m missing the point.  As a user though, I have found them pretty distracting and annoying.  And putting on my self-taught designer hat, I cannot seem to be able to justify the shifts.  I’d be much more forgiving of a shift that is intuitive – where it ties to something that in fact, is channeling a user intent.  However, in the cases I’ve seen so far, it appears to be promoting the important elements of the app, using scroll direction as an excuse to do so!