It's ironic that a site about UI/UX has a 5 seconds black screen during load. This might be due to the HN hug of death however. In either case, a small loader (or similar modern loading indicator pattern) would increase the site's usability by miles.
Edit:
Interesting that this comment is being downvoted. Initial page loading time is not a nitpick, it is the main source of an increased bounce rates.
> "[Users] with an average page load time of 2 seconds view 8.9 pages on average, while those with an average page load time of 7 seconds view only 3.7 pages on average. The number of pages viewed consistently decreases as page speed decreases, and the difference in pages viewed between users averaging 2 second load times and users averaging 4 seconds is 3.x pages. This means that a 2 second delay in page load time could mean a user exits your site 3 pages earlier."¹
Articles upon articles are written on the topic and UI/UX experts have a lot of patterns available to mitigate the issue.
We recently launched Mobile Patterns - a comprehensive patterns gallery especially designed for the key players in the design community.
Designers at Mobile Patterns capture ‘WOW’ moments from commendable mobile apps and lead you to a vault of short videos of micro-interactions and user flows. It also has a top search bar that enables you to jump straight off to the interactions you desire to see.
We’d love to know what you think about Mobile Patterns and how we can shape ourselves into your personalised patterns gallery.
As a small indie app dev - Great resource! Will use it. My thoughts -
1. Agree that use of space on screen could be improved.
2. Need to be able to rewind/replay videos to see interactions well
3. One way I think about patterns is the following 4 buckets
- consensus among whatever major apps like fb, google are doing whether u like it or not, because that defines the ‘standard’ people are used to, and there is a good chance it’s backed by a ton of UX research $$.
- novelties / cute details / visuals/ conceptually elegant design that add differentiation & perceived value, but on the other hand often suck up dev time and end up not being the ideal in terms of functionality.
- design that adds usability, even if it is considered not elegant or redundant - E.g captioning icons
- design that nudges towards intended behavior.
Of course great design does all 4 (HQ trivia is a good example), but more often there is a real trade off and a lot of the design pattern sites I see focus too much on #2 and a bit of #1 - at least I think it would be a really useful segmentation to have e.g “we’re showing you this pattern because it looks cool & different” vs “this has become standard” vs “this is simple & works really well”
4. a more comparative view of the apps (A does this this way, B does it this other way, etc) would be more useful than the individual ‘A does this, isn’t it nice’. I realise some comparison is possible if you select a tag (eg settings) then scroll through the apps, but not ideal yet
Awesome resource, a feedback would be to show 4 apps per scroll-view, instead of dedicating an entire screen height to one app - since first-time users are only going to see that one app when they load the page, and there's quite some scrolling involved to view more than two.
What is a successful mobile app I wonder? Some apps are products themselves and some are adjunct to the real product (think airline app) where there is no actual competition at the app level. I would think the patterns might be different for each kind.
It's supposed to be "comprehensive", but all the designs in the gallery appear to be of iOS apps. I haven't found a single Android sample in the gallery. Is it me, or is this the idea behind the collection?
We are working on adding more Android apps for sure. Curating the app gallery is a huge undertaking. One app takes around 1-2 days. Its definitely on our to-do.
Also, on an iPhone 6S using the Chrome browser app I've had three occasions where the page has crashed and reloaded. I don't see a way to precisely repeat it but I've had it happen twice on the main list and once in a detail page (the detail page crash happened as I hit the bottom of a long app detail page, but that may been a coincidence as I don't think I was hitting bottom of the main page crashes)
So happy to see this live! I've always wanted a resource like this to show clients how specific functions would work, without fully having to mock it up myself. Thanks Maitrik!
wow, what is going on with this website? Takes a few seconds to load and then it puts safari into a chokehold. I had to tap out and could only see the first row of items.
Huh not what I was expecting from the title. I expected it to be a sort of “best practice” mobile UX library - bottom navs, asking for permissions, that kind of thing.
Agree - 'patterns' suggests generic templates rather than specific examples (going back to the GoF design patterns book). The sub-heading 'Inspirational UI UX Patterns That Work' is closer, although it still has that misleading 'patterns' word.
Although perhaps I'm just showing my desktop-focussed anti-app age by obsessing about 'patterns'. I have to say that the overall page - while technically really well done - actually left me feeling saddened at the brilliance of the designers whose goal is attracting and then harvesting our attention.
(Okay, now I'll get off my own lawn and go back indoors).
Edit:
Interesting that this comment is being downvoted. Initial page loading time is not a nitpick, it is the main source of an increased bounce rates.
> "[Users] with an average page load time of 2 seconds view 8.9 pages on average, while those with an average page load time of 7 seconds view only 3.7 pages on average. The number of pages viewed consistently decreases as page speed decreases, and the difference in pages viewed between users averaging 2 second load times and users averaging 4 seconds is 3.x pages. This means that a 2 second delay in page load time could mean a user exits your site 3 pages earlier."¹
Articles upon articles are written on the topic and UI/UX experts have a lot of patterns available to mitigate the issue.
This article showcases a lot of great way one can use to change the perception of a slow loading page: https://medium.com/dev-channel/hacking-user-perception-to-ma...
---
¹ https://blog.littledata.io/2017/04/07/how-does-page-load-spe...
FWIW, the site was really really fast for me just now: CloudFlare simply returned a 502 error ;P.
Designers at Mobile Patterns capture ‘WOW’ moments from commendable mobile apps and lead you to a vault of short videos of micro-interactions and user flows. It also has a top search bar that enables you to jump straight off to the interactions you desire to see.
We’d love to know what you think about Mobile Patterns and how we can shape ourselves into your personalised patterns gallery.
1. Agree that use of space on screen could be improved. 2. Need to be able to rewind/replay videos to see interactions well 3. One way I think about patterns is the following 4 buckets
- consensus among whatever major apps like fb, google are doing whether u like it or not, because that defines the ‘standard’ people are used to, and there is a good chance it’s backed by a ton of UX research $$.
- novelties / cute details / visuals/ conceptually elegant design that add differentiation & perceived value, but on the other hand often suck up dev time and end up not being the ideal in terms of functionality.
- design that adds usability, even if it is considered not elegant or redundant - E.g captioning icons
- design that nudges towards intended behavior.
Of course great design does all 4 (HQ trivia is a good example), but more often there is a real trade off and a lot of the design pattern sites I see focus too much on #2 and a bit of #1 - at least I think it would be a really useful segmentation to have e.g “we’re showing you this pattern because it looks cool & different” vs “this has become standard” vs “this is simple & works really well”
4. a more comparative view of the apps (A does this this way, B does it this other way, etc) would be more useful than the individual ‘A does this, isn’t it nice’. I realise some comparison is possible if you select a tag (eg settings) then scroll through the apps, but not ideal yet
And because it's a US site, the number of ios patterns outstrip Android ones ...which makes it hard to use if i only want to see android.
But they are all Kitkat and older from the screenshots
Although perhaps I'm just showing my desktop-focussed anti-app age by obsessing about 'patterns'. I have to say that the overall page - while technically really well done - actually left me feeling saddened at the brilliance of the designers whose goal is attracting and then harvesting our attention.
(Okay, now I'll get off my own lawn and go back indoors).
This application will be able to: Read Tweets from your timeline. See who you follow, and follow new people. Update your profile. Post Tweets for you.