My mind grapes

Archive for the ‘UI Element of the Week’ Category


Popovers. Not only are they a super-tasty pastry, but they’re also a really cool tablet-only UI element.

If you’ve ever used an iPad, then you’ve almost undoubtedly seen popovers before. But just in case you need to refresh your memory, here’s what they look like:

– Popovers are an iPad-only UI element.
– Usually activated by tapping on some element on the screen.
– They can be used to either display information for a user, or to gather information.
– They can be pretty much any height/width as long as they are not larger than the tablet’s screen.
– Popovers are more lightweight and cumbersome than a modal view that takes up the entire screen.

Bam! Pole!:



Do you need your iOS application to allow users to swipe left and right to change pages? Then a UIPageControl element might be just what you need! Dots at the bottom of the UIPageControl give a visual indication of the number of pages open, as well as the currently selected page. Fun!

You can find examples of this user interface element all over iOS, including switching between open pages in Safari and switching between pages of applications in the iOS home screen (fun fact: the iOS home screen is actually an iOS application itself, and it’s referred to as “Springboard” in the iOS code).

An Example:

And a pole:

Deleting UITableViewCells

There are two main techniques for deleting UITableViewCells (rows of data) in iOS.

One way is to have the user tap and “edit” button, then present them with the controls to delete items. An example of this is the Safari bookmarks editing feature:

In this example, you have to first tap an edit button to enter “Editing Mode.” Then you tap the red icon that appears on the left side of the cell you want to delete. Then you actually tap the “Delete” button to confirm the action. It’s 3 steps to delete a single item, but it’s obvious that the functionality exists.

The second way is to allow the user to swipe on the UITableViewCell to remove it:

For this functionality, you must first swipe on a cell, and then press the “Delete” button to confirm. Only two actions, which is a little bit more elegant. However, there is no indication given that swipe to delete functionality is available, so the user might get confused how to delete items in the table (or if the functionality is present at all!).



This week’s UI Element is one of my favorites, the UIActionSheet!

You can use the UIActionSheet to:
– Present the user with options on how to proceed in the application. (ex: an “Export” button might prompt the user on where they would like to export to. Facebook, Twitter, Email, etc)
– Confirm a potentially dangerous action. (Are you sure you want to delete Jane McGee from your contacts list?)

The UIActionSheet often presents the user with a title message, but this is not required.

Here is this week’s pole:

And, an example from the internets:

Tag Cloud