Hotel Tonight is an on demand app for booking hotels in the last minute.
Here are a few screenshots of the app:
Popup Alerts Examples
Screen tips and popup alerts are a common tool to tell the user something without changing the main scene or the context.
Here are a few examples from the big players:
Hotel Tonight:
Whenever you mark an hotel as favorite your get the following popup:
Primer App: Cards-Based Mini Courses
Google’s latest Primer app presents mini courses (summaries) in small cards that let you quickly go through the material and finish each course within few minutes.
Push Notifications – Best Practices
How To Increase The Chances That Your Users Will Accept Your Push Notifications?
iOS push notifications are crucial for keeping a tight relation with the customers. Without it it’s hard to communicate with the customers or maintain a manageable retention.
There is only one shot at activating the push (you can only show the OS popup question once), so many apps create a “fake” push notifications popup: if the user accepts the fake one – they show the real system popup, but if the user rejects it – they try again in another time.
This technique is used by many consumer apps. Here are a few examples:
Scrolling Hints (Tips) – Let The User Know There’s More…
Let your users know there is something waiting for them behind those lists.
If you want to make sure your users are aware of a scrolling option – toasts are a nice way to send a “hint”.
Although usually used to give some feedback about an action that was performed successfully, toasts can also appear just to tell the user he can do something like scrolling up or down.
Here are a few examples:
Twitter:
A toast that lets you know there are new tweets waiting.
LinkedIn:
Facebook:
Facebook uses this technique in several places. The one I like the most is the new comment tip:
Zolt:
Here’s a slightly different use – still giving the user a tip to scroll up or tap the button, but the text also mentions the exact number of new stories. Nice!
Visual UI Tricks: Using Placeholders When Your App Loads Slowly
Speed is one of the most important aspects of usability (see first UI tip by UIMonkey).
Early versions of the iPhone used to show an image of the camera shutter while waiting for the camera app to launch – this led the user to believe that the loading time was short despite the fact it was one of the slowest apps to open up.
Today many apps use different techniques to “buy” some time until the data is fully loaded.
Here’s a few examples:
Facebook – Content Placeholder:
Facebook app opens up immediately showing the feed. If data is not available yet the feed shows a content placeholder:
Quora App – Content Placeholder:
Quora is using the same technique like Facebook. The loading process shows a feed placeholder:
Twitter App – Cool Zoom Animation
Twitter app takes a bit of a while to load. It’s kind of annoying when you are in a low network area but the waiting period ends up with a delightful moment: an animation that expands the bird logo into the feed.
LinkedIn App – Just Splash Screen
LinkedIn is using the good old way of simply showing the logo in a simple splash screen: (boring…)
Design Hunt – image placeholders when scrolling fast
Design hunt is all about images. Whenever scrolling faster than the loading speed – placeholders are shown in each item until the image is loaded.
Mobile Checkbox Buttons – Examples From Real Apps
Checkboxes were here long before mobility, but selection is something highly required even in modern mobile apps.
Here are a few examples of checkbox Buttons taken from real apps.
AliExpress App
The onboarding workflow of AliExpress includes selection of interests and gender.
The checkbox control is visual (image based) but also comes with a label and a pretty traditional checkbox.
This seems like a great combination of a visual design with a well known standard.
Medium:
Medium is designed in a white minimalist fashion. Users can select their interests through a simple scrollable list with a checkbox in the right of each item.
The checkbox changes from plus sign to check sign.
Zolt App
Zolt is a news aggregator that summarizes posts into 7-8 lines each.
Users can select their interests by checking the relevant items in a 2 columns scrollable check list.
More Checkout Buttons (Shopping Apps)
Following our first post about checkout buttons, here are some more examples taken from successful shopping apps.
Wish App
Wish has a slick design.
Here are 3 screenshots showing the main list of items, and the details of each item.
The bottom area includes the buy button and some related information (secure payment and special offer details.
Here’s the side menu and the check out popup that presents a summary of the purchase.
Gett Presents: World’s Longest Tour Ever…
Typical number of pages in an app tour is usually 3-4. Gett took this introduction tool to the limit with no less than 8 pages! 😳
What can you find In those pages? Everything about the app: product value, promotions, examples, new features.
Too much…
Surprising: ASOS app Actually Wants You To Take A Screenshot!
While reviewing different shopping apps (mainly for the sake of this buttons collection) I ran across a surprising UI experience:
I took a screenshot (like I always do) and the app itself (called ASOS, BTW) just switched to a screenshot viewer and suggested I would share my screenshot with fitness.
The functionality is called: ‘screenshot and share’ and it was a complete twist in the app plot.
Here’s an example of how it works:
UI Monkey 