Grid View Pattern

THE CHALLENGE

Conduct competitive Analysis of best industry standard products that use the grid view pattern and design our own grid view pattern.

My goal was to design grid view layouts for the tablet and mobile screens that can be scrolled vertically ( up / down ) or horizontally ( left / right ). In addition, grid views are known to have the following navigational characteristics:

  1. The flick, swipe, or drag gesture is used to scroll the grid view.

  2. Grid views are both a layout manager and method of navigation.

  3. Tapping on a grid view allows the user to drill into that object or open up the object using a popup dialog.

  4. Once the user has drilled into an object, a method should exist to return to the grid view.

My role

I designed the layouts and graphic assets for the grid view pattern on the following mobile screens:

  1. The home screen layout containing icons with labels positioned below them with center alignment.

  2. A gallery layout that contains a uniform grid where the edges of the items usually touch, similar to a photo gallery.

  3. The Fix It Fast demo masonry layout, with a mix of card and tile dimensions.

 

The Home Screen

gridview_homescreen.jpg
 

Gallery

gridview-gallery.jpg
 

Fix It Fast Demo Dashboard

FixItFast Dashboard w Border.jpg

The Impact

The Oracle Alta Mobile grid view pattern was approved by our Creative Director as well as the Vice President of the UX Middleware Group. It was also very well received by:

  1. Our Customer base who implemented the grid view pattern within the applications and products they were creating with our technology.

  2. Our Product and Engineering teams as we worked with them to ensure successful implementation of our grid view pattern.

  3. Our Management team as the grid view pattern met the requirements that we had received from Product Management.