laboratory

[ , , , , , , ]
Experiment
Improve mobile
navigation
Know about other breadcrumbs?
Tell me!
Posted in laboratory as , , , , , ,
Date: Sep 04, 2011
2 comments

[Updated] UI Pattern [Idea]: iPhone App Breadcrumbs

For years, breadcrumbs have been a reliable method for retracing one’s steps or to get a sense of location on websites. So far I’ve not seen anything quite like that on mobile apps, so I thought I’d take a crack at working out how breadcrumbs might work in a touch environment.

Please note: This is a design experiment. I’ve not actually built this, yet.

iPhone breadcrumb UI pattern

Attributes and features of the iPhone breadcrumb UI element:

  • Each items serves as a button back to its respective level.
  • When breadcrumbs are too difficult to read, hold and zoom to magnify.
  • Items evenly space where room is available.
  • When space starts becoming tight, the right side of all but the last item is faded out.
  • When space is too tight for words, only the arrows remain.

Original screenshots

  • First Level: Evenly spaced, divided by an arrow.
  • Second level
  • Fade right side of all but the last item.
  • Press and hold to zoom and skip.
  • Only arrows when there are too many levels.

Second generation

After a little time away from the designs, I realized there might be some benefit to keeping home and the last item always visible. Home also didn’t have to be text, an icon might do.

With home icon and visible last itemWith Home icon and visible last item

Nth items, home and last visibleNth items

Related Posts:

2

This entry was posted on Sunday, September 4th, 2011 at 9:14 pm and is filed under laboratory . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “[Updated] UI Pattern [Idea]: iPhone App Breadcrumbs”

  1. 1
    Seamus Nally | Reply
    March 13, 2012 at 10:00 am

    I’m working on spec’s for a Mobile app and googling for creative UI elements for Breadcrumbs and sure enough I find myself on Hanami design. Hope our paths cross in the future and we get to work together again. I really miss our brainstorming sessions where we set aside the computers and just went at it on paper.

    • 1.1
      Weszt | Reply
      March 14, 2012 at 6:32 pm

      Awesome! Yeah, I miss our brainstorming sessions, too. Hope the breadcrumb idea is useful. Not developed, obviously, so I can only assume its workable.

Leave a Reply