Wednesday, 16 February 2011

Official Blogger app fails to implement design patterns

Google released official Android app for Blogger a week or so back. Unfortunately, this app fails to deliver. The user interface is confusing and difficult to use. 

What could be done to make it better. UI design patterns to the rescue!
More after break...

Action Bar implementation

Top bar in this application looks like an Action Bar but it doesn't behave correctly.

Maybe the most important function of an Action Bar is to provide action controls to user. In this implementation it fails to do so. The two buttons on right side of the bar are actually navigation buttons. The left one opens up a new blog post and the right one opens a list of blog posts. In the new post screen all actions are shown as buttons in the bottom of the screen instead.

Remove the navigation buttons and replace
them with image controls. Save and publish
could either be kept at bottom or moved up.

Labels and location controls
can remain where they are now.

Evernote's new note display is a very good
example of good action bar implementation!

Action bar should help users to navigate inside the app and provide an easy way back to the home page. In Blogger implementation neither of these are true. The blogger icon is not clickable.

Make this icon clickable. It needs
to take the user to app's home page.

Add title of current page to
the action bar.


Reason why the Blogger icon on the action bar is not clickable is probably because the app doesn't have a natural home page. Addition of a dashboard page would be a great solution for making it more clear to users what this app is capable of doing.

Creating a dashboard like this would
introduce clear starting point in
the app and also a clear overview of
the app's capabilities.


By following these simple UI design pattern guidelines this application would me much easier to use and understand.