Thumb Reach Area on Smartphones

Luke Wroblewski in his seminar, Designing Mobile Web Experiences, speaks about the area of easy reach in mobile devices. Luke claims that smartphones have preferred reach zones when operated in portrait and landscape orientation. Devices used in portrait orientation are usually operated with one hand, and the preferred reach zone is located in the lower center of the screen.



Devices used in landscape orientation are usually operated with two hands, and the reach zone is significantly different.



While listening to Luke's explanation I realized I have always seen this, but somehow my brain never registered the observation.
Few popular iPhone apps, took this lesson to heart and opted for a custom tab navigation bar, placing the main action in the lower center of the screen. This is, in fact, a convenient location for both left and right handed individuals that operate their smartphone in landscape orientation.



The article below is a collection of different visual designs for tab navigation, most of which seems to emphasize the central tab with a larger size and distinctive style
Examples of iPhone iOS UITabBar Interfaces

Read more »

Interesting App Design

Few interesting elements in this list. Active tab and tab with notification (?). Item with items in a list. The hierarchy is done by right aligning the icon on the top item (Alexander), while left aligigning the icon in the sub item. Background color also help to distinguish among them



Also I found interesting their solution for tabs with options (see star and search tabs).
This is how they look like when expanded.
Also interesting the toolbar of actions applied to a single element.

I like the visual design for the tabs. I also like how did they layer different type of information but maintain a clean and scannable design. Love the visual design in general.

Read more »

Information Overlay

I believe that this was ROAMBI: a data visualization app. They do have beautiful visualizations for both iPhone and iPad. I found interesting and playful the way the layered information on the graph. If you click on the plus icon on the right the visor will animate and till overlay the graph showing and interactive slider and the related numeric data.

I think this is an elegant and clever idea. In the latest release of this app they seem to have remove this functionality. My guess is that they didn't see the need of having a view without the overlay, which now shows all the time.

Read more »

In-Place Item Details

Cool way to display additional information of a items in a list.

Read more »

Visual search results.

This is an interesting way to display search results for something besides images. The designer decided to display the results in a very visual way which is also space efficient. If you look at it closely this is like a table of information displayed in a much more appealing way.  If this information was displayed in a table instead that in a grid they could fit only 5 results at most before scrolling.

Read more »