CircleCount helps you better understand Google+

2012-09-19 12:28:53 (1 comments, 10 reshares, 17 +1s)

+Smashing Magazine released a set of printable templates for pen & paper sketching including multiple Android templates. Check them out on the Smashing Magazine site:
http://uxdesign.smashingmagazine.com/2012/09/18/free-download-ux-sketching-wireframing-templates-mobile/

2012-09-11 16:08:27 (3 comments, 9 reshares, 22 +1s)

#AndroidDev

Thanks to all of you who tuned in to watch the first-ever episode of Android Design in Action! Over the next few days we'll be looking over your feedback on the show format to see how we can deliver even more Android design goodness (hopefully once per week).

In the meantime, the ~30 minute video is now posted here:
Android Design in Action

I've also attached to this post all the slides we used during the show, including our single-screen "makeovers" for London Underground, m-parking, and London Bus Checker.

2012-09-08 12:08:18 (3 comments, 140 reshares, 345 +1s)

Styling Android apps has never been easier than it is now. Creating custom styles on top of the awesome Holo style is easy and straight froward with the great online tools that we've seen released recently.

Here's a quick overlook how to customise your app's app icon, action bar and components you want to style.

2012-08-30 15:48:15 (8 comments, 25 reshares, 44 +1s)

I wanted to talk about tabs and tabbed UIs. In my opinion using tabs wrong is the fastest way to fully ruin your app. On the other hand tabs are easy to get right and doing so will give your app a great look and easy to use navigation structure.

2012-08-18 18:51:19 (3 comments, 11 reshares, 31 +1s)

#AndroidDev  

Undo Bar

As a follow up to yesterday's post [1] about Done and Discard, I realized we didn't have great sample code for an undo bar (ala Gmail). This is a bar that shows up after a potentially destructive or heavyweight action is performed (e.g. archiving or deleting an email) and briefly offers the ability to undo the most recent action.

Here's some code showing how one could achieve this:

http://code.google.com/p/romannurik-code/source/browse/misc/undobar

Even better than this bar (which could be considered harmful in some cases, since it's a popup/toast/etc.), would be to show an inline, in-context UNDO action. But this can be a decent starting point.

Enjoy!

[1] https://plus.google.com/113735310430199015092/posts/R49wVvcDoEW

2012-08-17 22:13:05 (0 comments, 8 reshares, 21 +1s)

#AndroidDev

Done + Discard

A few minutes ago +Reto Meier and +Ian Ni-Lewis talked about a detail-edit screen in a finance app during The Friday App Clinic [see third photo]. The screen was a bit complex, offering something like four different ways to leave the screen with either positive (save) or negative (discard) results. One of the methods even used a floppy disk icon, but let's just gloss over that for now.

There's a visual pattern in some system apps where the Up button is replaced by a Done button, optionally with an adjacent or overflow'd Discard negative action. I personally think this pattern works really well within the framework of—and in the spirit of—the guidelines, so I decided to open source some code showing how to do it.

You can find that code here:
http... more »

2012-08-17 17:47:42 (7 comments, 2 reshares, 15 +1s)

New Google+ "Quick Return" Action Bar

The recent update to +Google+ on Android includes an emerging pattern called "Quick Return". You can read more about it at +Android UI Patterns here: https://plus.google.com/u/0/115177579026138386092/posts/iQvkJmHnXPM

It's very useful in certain situations, like Google Now, but the implementation in Google+ is questionable. These are Action Buttons, which Google has clearly defined in the #AndroidDesign guidelines. However, they seem to go against almost all of the recommendations. Here are some of the issues:

- Not using Split Action Bar pattern. [1]
- The bar is taller than 48dp. [2]
- The icons are too large. [3]
- Can easily be confused with Top Bar Actions (like tabs). [4]
- They don't pop into the action bar when in landscape and on large/xlarge screens. [5]
- Theus... more »

2012-08-16 22:34:09 (17 comments, 31 reshares, 68 +1s)

"Quick Return" an emerging UI design pattern on Android. 

This design pattern is a great example of smartly saving screen real estate without hindering usability on UIs with scrolling content.

Big thank you to +Roman Nurik and +Nick Butcher for providing a great example app an implementation of the pattern! See the post from Roman here: https://plus.google.com/u/0/b/115177579026138386092/113735310430199015092/posts/1Sb549FvpJt

2012-08-15 10:27:45 (8 comments, 11 reshares, 27 +1s)

New Android Photoshop GUI Design kit from +Taylor Ling.

Direct link to Taylor's post: http://androiduiux.wordpress.com/2012/08/15/android-icsjb-photoshop-gui-design-kit-free-download/

Direct download link: http://www.mediafire.com/download.php?8fjzmfvgzcv2f2x 

2012-07-26 20:48:45 (0 comments, 12 reshares, 30 +1s)

A lot of great new Android articles are popping up everywhere!

Here are two new ones from today on top of the three I linked to from my blog few days ago:

Designing For Android: Tips And Techniques
by +Jamie McDonald 
http://mobile.smashingmagazine.com/2012/07/26/android-design-tips/

SIDE NAVIGATION UI PATTERN IN ANDROID, PART 2
by +Taylor Ling  
http://androiduiux.wordpress.com/2012/07/27/side-navigation-ui-pattern-in-android-part-2/

2012-07-26 10:41:12 (46 comments, 219 reshares, 582 +1s)

Android Action Bar Style Generator now has preview feature. 

This is such an awesome tool. Designers can tweak the action bar colors the way they want and then simply send the URL to developers. As the URL parameters store the whole state the devs can then easily just download the assets and import them to the project.
 
http://jgilfelt.github.com/android-actionbarstylegenerator

2012-07-25 16:47:17 (16 comments, 34 reshares, 72 +1s)

Finally a Fly out, Sliding Menu, Nav Drawer worth forking!

If you're looking for a library to help implement the new "Nav Drawer" pattern, as seen in apps like Google+, Facebook, Youtube, Spotify, etc, look no further.

"SlidingMenu" was created by jfeinstein10 and is the best implementation I've seen yet (and I've tried many). The animations are smooth, it uses bezel swipe, and its easy to implement, customize, and extend. It also (now) plays nice with +Jake Wharton's awesome libraries like +ActionBarSherlock and ViewPagerIndicator, as well as others like HoloEverywhere.

https://github.com/jfeinstein10/SlidingMenu

#AndroidDev   #AndroidDesign  

cc +Android UI Patterns +Holo Everywhere +Android Developers 

2012-07-18 20:14:26 (10 comments, 6 reshares, 7 +1s)

Hey guys,

I need a little bit help with my book stuff and thought to ask it from all of you awesome people here at G+. I'm in a bit difficult situation in the finishing it. I have been in belief that using screenshots of apps as examples of the platform functionality is covered under fair use but apparently I was wrong.

So now I need to acquire permission to use screenshot of different apps I've used so I can keep them in. So if you or someone you know are the copyright holder of any of the following brands / apps or know who to contact please let me know. You can either share a post to me here or send me an email to my email address: juhani.lehtimaki@iki.fi or leave a comment bellow and I'll reach to you. I have a ready form I will send once I find the right people to send it to.

All screenshots are credited to their owners.

All screenshots in theb... more »

2012-07-09 13:36:05 (14 comments, 219 reshares, 396 +1s)

What a cool tool! Wireframing for Android in your browser.

2012-07-02 19:41:51 (16 comments, 9 reshares, 26 +1s)

I still find back being very confusing on Android. Unfortunately the Navigation on Android session from Google IO only made the feeling stronger.

I would like to see the software nature of the Android back button being fully utilized. Here's my proposal for making it easier for users.

2012-07-01 14:04:51 (8 comments, 3 reshares, 40 +1s)

I think that Google has cracked the chicken and egg problem Android tablets were suffering from with the announcements they made in the IO. New (cheap and good) hardware, great tool support and leading by example with their own apps is going to make Android tablets big.

2012-06-28 13:47:37 (29 comments, 1 reshares, 27 +1s)

Here's a quick poll. Please +1 "yes" or "no" comment below.

Google mentioned this side navigation pattern yesterday in the keynote. The term they used was "Ribbon menu". The question is: do you think that Ribbon Menu is a good name for this pattern?

2012-06-27 21:10:15 (1 comments, 0 reshares, 14 +1s)

I'm not saying that Google reads my blog but this is what I wrote in February:
"The shift we need must be more than new technology. We must start thinking TV as extension of our other devices and not to try make our other devices (or remotes) extension of TV. A TV is a large display. Let's treat it as one. TVs will be part of the smartphone ecosystems we already have. Tools for devs will allow them very easily move display part of their apps to any TV any time. Our TVs will become a natural extension of the best technology we already have."

hehe ;)

Well. It really wasn't that unique idea but man am I happy to see Nexus Q! now if I could buy it in here...

2012-06-26 21:34:19 (8 comments, 12 reshares, 31 +1s)

Google I|O app is again this year a great example of Android design targeting multiple devices. 

2012-06-24 13:56:42 (1 comments, 10 reshares, 32 +1s)

+Roman Nurik released beta code to support swipe to dismiss on Android lists and +Jake Wharton soon after backported it to older devices.

2012-06-10 14:09:06 (89 comments, 192 reshares, 565 +1s)

The side navigation pattern is coming. It seems to have as many different implementations as there are apps out there. It's also pretty difficult to get right and can cause confusion in users. Here are some of my thought how to us it to replace the outdated dashboard on your apps.

2012-06-07 22:04:20 (19 comments, 43 reshares, 113 +1s)

One year ago it was difficult to find good examples of good Android design. There were the few same ones I had to use in almost all posts (like Evernote). Fast forward one year and there's no shortage of awesome apps with brilliant design. We also finally have an "Android look" for the apps. The holo theme has brought us unified look without making the platform boring. Developers take the holo and make it look their own. 

I wanted to share a selection of (non-Google) apps I love. These apps behave and look like Android apps should. There are many, many more I could include but I think this is a representative set of apps.

These are the apps I'd recommend developers and designers to use and experience before starting their design. Of course, we could probably find some problems in each of these apps but they are small compared to the overall design of each one of... more »

2012-06-06 16:41:49 (6 comments, 4 reshares, 9 +1s)

Android UI Anti-Patterns

The discussion on #AndroidDesign  is finally heating up. User's are starting to notice when apps are literal ports from iOS, and that it is more-than possible to have beautiful apps on #Android .

The Android Design guidelines (developer.android.com/design) provide an incredible source of mobile interaction design patterns that, when used correctly, stand to unify and strengthen Android user experience.

To help contribute to this discussion, I started this page with +Juhani Lehtimäki (creator of +Android UI Patterns) and +Guenther Beyer  (creator of androidicons.com and designer of +Gigbeat). 

Along with highlighting popular apps that don't follow Android design patterns, we also create re-imagined mock-ups, and share similarly focused posts and articles by others.

We hope you'll join the conversation!

2012-06-04 15:02:51 (0 comments, 4 reshares, 13 +1s)

Due to time constraints I can't do a full in depth analysis on all the screens the way I'd like to but this app is too good not to be mentioned today. I'm very happy to see an iOS to Android port that is very good.

2012-05-23 23:44:38 (4 comments, 1 reshares, 7 +1s)

A friend of mine and old colleague from the frog made me a new blog banner so I've updated the blogs visuals. The new theme is much simpler and nicer to the eye. I also dropped the word "Design" from the blog title as it has never been in the domain URL.

2012-05-23 14:44:39 (0 comments, 7 reshares, 8 +1s)

+Chris Banes has updated his pull-to-refresh library adding a new indicator concept.

I think this is an interesting experiment. I haven't had time to check it out yet but I will. My opinion has been that pull-to-refresh has never really been too difficult to discover due to the nature of lists. In my opinion it is one of the easiest to discover hidden gestures. Still interesting to see how this would work in practice.

2012-05-16 11:30:46 (54 comments, 25 reshares, 45 +1s)

A (not so) new UI design pattern is emerging on Android. It is slowly replacing dashboard in many apps and seems to work nicely on Android as it does in iOS. I'm talking about the side navigation what we've seen on Facebook, Spotify and now on Evernote. What should this pattern be called? A side navigation, fly-in navigation, navigation drawer? Ideas?

2012-05-14 10:51:01 (4 comments, 7 reshares, 4 +1s)

The second part of my Google TV post is published. This one is about the design approach and what kind of factors to consider when thinking about creating apps for Google TV.

#googletv

2012-05-12 17:15:12 (2 comments, 3 reshares, 4 +1s)

Galactic Opportunity Missed

Despite having the greatest media in the universe, +NASA's Nasa App for #Android is downright ugly not pretty.

In all fairness, the app hasn't been updated since January, a couple of days before the #AndroidDesign website was born. However, they managed to create an app that would've been an eyesore in the G1 days.

Some specific things that could should be fixed:

- No action bar
- Custom menu options with the Button of Shame
- Modal progress dialogs everywhere
- Bastardized sharing
- Custom preferences screen
- Heavy gradients
- Incorrect thumbnail densities on ListViews (for xhdpi)
- No tabs or ViewPager anywhere (iOS version has tabs)
- Generally uninspired design

2012-05-11 20:25:32 (3 comments, 15 reshares, 22 +1s)

And here I was hoping to get the next Google TV article done but nope.. Turntable.fm broke the camel's back. I've been ignoring these high reputation iOS ports but there simply are too many to keep ignoring them. So here goes. Second post of today: Common mistakes when porting iOS apps to Android.

I beg companies behind popular iOS apps: please read the Android guidelines and follow them!
http://developer.android.com/design/

+Paul Burke started a new G+ page for Android UI Anti-Patterns. We will get the page up and running soon. It is going to be place for publicly discussing common UI problems on apps hopefully preventing others from making the same mistakes.

2012-05-11 18:47:31 (0 comments, 9 reshares, 6 +1s)

#googletv is coming. I wrote a short article about my views of future of the Google TV and why I'm going to be writing about it in the future.

A followup to this article coming up shortly "Designing for TV".