Mobile UI Patterns | Hacker News Reader

Mobile UI Patterns

mobile-patterns.com

261 pointsphilfreo31 comments

I don't like that this web site is called "Mobile UI Patterns." As others have pointed out, this is more specifically iOS design patterns. While some things can be similar, Android and iOS have different design patterns, and I think that should be respected when developing an application. Personally, I dislike when an Android app is made to look like an iOS app.

For those, who want Android design patterns, there is this web site: http://www.androiduipatterns.com/

Is it me or the usage of "patterns" here is not very accurate. It could be called "mobile screens design". "Pattern" could be used for specific and abstract solutions to interaction problems. For instance, the Google map's corner in iOS, that you click to get settings, is a "UI pattern". Some such patterns can be abstracted from the OP, but what I see is a list of categorized screenshots.

I think it's a good approach to collect a few screenshots, order them into coherent groups and them try to abstract some "pattern".

The screenshots themselves aren't really a pattern though... so I definitely agree with you :)

Yeah... Besides, people will have a lot of trouble justifying stuff like "custom tab navigation" as a solution to an interaction problem beyond "it looks cool".

without the user end data of where the user spends the time andwhy that might be imortant makes this site somewhat worthless..

Seriously, please stop using such horizontal scrollable layouts. It's a pain to navigate

Agreed. Hurt my head at first. Then I thought maybe the menu on the left was a javascript filter or scroll to but alas it wasn't.

Chrome under Lion: swiping the trackpad in an attempt to scroll horizontally often results in navigating back/forward through pages.

Chrome's implementation of this feature is absurdly broken. You can disable it by turning off two-finger page swipes in System Prefs -> Trackpad. Still looking for a way to disable it for Chrome specifically.

Not on mobile devices :-)

(That's no justification for using horizontal scrolling on a website that also targets the desktop, though.)

Word. For those with a mousewheel: on some browsers you can hold shift and roll up/down to scroll left/right.

Did anybody find any Android ones? I didn't see any in my casual perusal. Is this by design? Or is the site owner just an iPhone user?

Yeah. If anything it should be called "iOS patterns". There's very little here to extract as general mobile patterns, and lots of these "patterns" would collide massively with both Android and WP7 if employed in an app.

The fact that this website doesn't even work well on a PC should really tell how iOS-centered it is.

Some people may think users don't care, and that everyone loves the iWay, but I've seen complaints on Android market that "this is just a copy of the iPhone-app. We want an Android app". Why? Because the UI semantics are different enough, well beyond the point of noticeable.

It works just fine on a PC. (Chrome here.)

There is very little decent design on display on the Android Marketplace.

Here: http://www.androidpatterns.com/

Great little composition & perfect experience to go with it. People here are bitching about the details - but the fact is that the design is simple enough to put focus solely on the mobile designs. If you're a designer and need a bit of categorized inspiration, this is perfect. Thanks for sharing.

I love the site, am visiting it for a couple months now to get inspired. Another great site is http://pttrns.com/

That's a great site. I was going to say that I wish the OP had patterns for article text, and pattrns does, so thanks :)

Ironicly, this site is unusable on a mobile device thanks to a "fixed" div too large for my screen.

Also pttrns.com

Funny to see how iPhone SDK has already forced on us how smart phone apps should look, just like what MS did to us with Visual Studio. I know the SDK developers want to make programming on their respective platform easier with these built in look and feel, but as a mobile developer, do I want my app just look like everyone else's?

Awesome post, thanks for sharing. There are so many inspring patterns here that I can see myself learning from for my mobile web apps. Nicely categorized too.

Feature Request/Suggestion: Let community take it on from here and submit designs/screen shots and vote each other.

Anything similar for desktop? Or non-mobile web applications?

Thanks a lot for the link, very interesting. Alright it is not "pattern" in a strict sense but it gives a good overview of the composition of some apps.

Nice. Is there anything like this for tablets? iPad or Android would be helpful.

Thanks

Great collection of screenshots!

I got some inspiration from this.

this is a good resource for someone as oblivious as me!

Hrmm.. looks like some free AT&T advertising.

Use retina display sized screenshots.

So is there anything out there showing Android patterns or better yet, non-iOS?

Reply on news.ycombinator.com