Tuesday, December 10, 2013

The Evolution of the Message List

Originally when I started designing, the prevailing design aesthetic for iPhone was skeuomorphic design, or designing elements to reference their offline counterpart.  For example, a gaming app could have an element that resembles astroturf, a note-taking app might be made to look like a physical notepad, etc.  Since I started designing before the release of iOS7, my first design mock-ups adhered to this philosophy.



The first pass of the message list was pretty straightforward.  The messages are listed in chronological order with very little fanfare.  I attempted to incorporate a skeuomorphic element by grouping the messages into "folders" by date.


What worked:

  • The names and message are differentiated, clear, and read-able
  • There is an attempt to break the information into more digestible categories 


What didn't:

  • There are too many messages shown on the page, resulting in a cluttered appearance
  • While the categorization is clear, the categories themselves are unnecessary











My next pass took the skeuomorphism one step farther.  Each message now has the texture and color of paper, to represent a physical letter.


What worked:

  • The main element of this page is now skeuomorphic


What didn't:

  • There are still too many messages shown on the page
  • The date folders are still unnecessary
















The next design pass addressed the congestion on the page.  I made the name and the message more visually distinct, and increased the spacing so that fewer messages were visible on the screen.  I also removed the date "folders", making the page more streamlined.  The final step was to modernize the profile images by making them round instead of square.



What worked:

  • The message list is a million times more readable
  • There are no unnecessary breaks or "folders"


What didn't:

  • The gray border that enhanced the design takes up valuable screen real estate.
  • The messages are still a little too congested.


















No comments:

Post a Comment