Archives For user interface

After bashing Apple a little on its lack of innovative breakthroughs in iOS following WWDC, I am going to praise them a little here.  Cult of Mac published this post about how the iOS7 design is a masterpiece.  While I don’t think the interface design itself brings distinctly unique elements that we haven’t seen in Android and Windows, there is some truth to the iOS design being amazing.  Notice I didn’t say iOS7 – because the brilliance is applicable to all iOS designs from day one.  In spirit, this goes to one of Steve Jobs’ quotes about design – “Design is not just what it looks like and feels like. Design is how it works.”. 

If you had a flawless interface design implemented with stutter, that automatically means it is not a brilliant overall design.  While design elements are certainly getting amazing on Android, the feel of the interfaces are still short of flawless.  This is the real place where iOS continues to shine.  The touch interface must be psychologically satisfying and stimulating to the user.  When you touch an icon, the interface must react like it was touched.  The animation of going from a small icon to filling the screen and back to dispersing and collapsing into the icon’s spot without any glitch whatsoever provides the user with such visual pleasure that we want to keep coming back to the experience!

Image

Consider this simple case of touching to copy text.  I’ve been attracted to the iOS text selection for a while. A long touch usually selects the right section of text that might be of interest to the user.  As in the screenshot above, it will select the relevant paragraph in such a case.  In another case, it might select a link or text in a bullet, etc. It is a small detail – but the attention to detail is superb!  

Psychological satisfaction should be the goal of every design.  Every action should be designed and implemented with the goal of providing the user an incentive to come back to perform the action.  And this is almost always about elements in design, software and hardware all coming together to produce that brilliant experience.  Even if one of those elements is less than ideal in the way it functions, the experience is going to be less than ideal.  This is why integrating multiple disciplines of engineering and design and iterating over the experience until perfection is accomplished is paramount.  

Advertisements

shifting_ui_animation_2

I wrote about the undesirable shifting UIs earlier. Here is an alternate perspective on such UIs. There are times when a shifting UI has a purpose.  When it does, it takes away the attention of the user to a new menu or a popup for a reason.  The user was meant to be looking at the changed UI and it may even be relevant to the user.

News sites often do this type of animation.  As the reader reaches the end of an article, they would show a peek into the next article.  That is a highly relevant distraction – one that is worthy of the user’s attention.

So, there is a place for these transient UI elements.  It is not all bad or all good – the key is, as long as the UI matches the intent of the user or an action that is a natural step for the user, even popups can be good.  Random shifts that distract the user from what they want to look at are not cool!

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:

shifting_ui_g+

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:

Image

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!

All products are about the users.  Knowing the average user is critical to understanding how to build a product.  Even after having a successful product, continuing to know the user and following the evolutions users go through is critical to be able to innovate.  Recently, I’ve been thinking a lot about user experience on applications, particularly mobile apps and have been realizing that some of the most successful applications have pockets of bad user experience and in some cases, even below average overall experiences.  Here are some examples that really make me wonder how the usability of these apps get impacted, if at all, by these less than ideal experiences.

Annoying popups

Image

Granted Facebook wants users to really try graph search and explore it – but a popup that is in your face all the time, even as you scroll down the page?  And that too, to a user that has actually tried graph search and hasn’t found it compelling to come back often yet?  Not too long ago, they tried a popup on the mobile that forced you to find friends from contacts or dismiss it every single time you opened the app!  If Facebook didn’t have the kind of user base it does already, would users tolerate this?

Forcing a tie between functionalities when not required

Image

I used to pretty regularly email myself articles from Pulse, but I have not done it a single time since they started forcing me to highlight the article in order to share it.  In fact, I consume more of my news via Flipboard, as I find the highlight icon overlay on the screen all the time quite annoying.  Seen the reviews on the latest Pulse update yet?  It is clearly not in the direction of enhancing user experience.

Clutter on the main screen or dashboard

Image

Microsoft products (Powerpoint is shown here, but Word and Excel are no exception) pack all kinds of actions on the main dashboard, while Apple is picky about what is contained in it. I’m a power user and use the Inspector in Keynote quite a bit to have access to other functions – but, I much prefer the cleaner dashboard!

Buried and/or complex functionality

Sometimes, you truly want certain functions to be hidden and hard to get to. Facebook’s privacy settings have been notorious for that.  Studies have shown that links placed on websites in areas that typically contain banner ads are not widely visited.

Here is an example of a complex topic (privacy) made easy to read and understand (a product of the CMU CUPS lab).

Inconsistencies

The human brain tends to remember meta elements such as the portion of a screen where a particular functionality typically resides or a typical action that occurs upon clicking a type of element.  Inconsistencies in this can cause confusions!


Facebook has several such inconsistencies, especially on the mobile app!

Poor handling of connectivity challenges

Sure, everyone wants the connectivity issues to be fixed and the applications to not have to worry about it.  But, we live in an imperfectly connected world.  Some applications particularly handle it poorly.

Here is a case where an upload to Facebook failed due to a momentary disruption in my wireless connectivity.  It not only does not resume when the connectivity is back, the only way to clean up my notifications screen after this happens is to reboot my phone!


Ongoing slow experience on mobile

Not to pick on Facebook here, but the performance of the mobile app, even in conditions of good connectivity, is sometimes abysmal.  Flipboard is another one that I sometimes have issues with in terms of speed and handling pockets of bad connectivity.  Some apps, however, have really nailed the caching and rendering strategies and while may have an initial delay, work flawlessly once launched.

It’s challenging to perfect this on all fronts, but paying some careful attention to detail can go a long way in designing an app well.

Pinterest’s latest update boasts a PinIt button on the main screen, overlayed on top of each image.  This action was one click away in its older versions.

ImageWhen images don’t have enough of a clean white space, this overlay of the button clutters the image and obstructs the view, making it less attractive of a home screen.

ImageThe older view was a lot cleaner, which meant the users that wanted to take action needed to get to the next screen of viewing the detailed image before pinning it.

Does this mean that data indicated not enough users were re-pinning from the mobile devices?  Or, is it Pinterest experimenting to see if a lot more users will re-pin as a result of this?  To me, personally, this takes away the eye-candy experience that the main screen was delivering.

But, what really is the right tradeoff here? Do people pin because it is easy to pin or do people pin because they really like what they see.  If it is the latter, you would think that cluttering what they see at first is not the solution…