Effective view switching when space is at a premium

Question

I have an area in which space is at an absolute premium and I have a very small space to switch between a mailing address and a billing address.

I'm struggling on deciding on a tight but effective UI mechanism / micro-interaction to switch the address view.

This is on an enterprise system that has training, onboarding, etc., and will be used by power users -- though of course I still need things to be as self-discoverable as possible.

The first example is a vertical alignment of icons next to the address. The second icon has been intentionally offset so as not to lineup with an specific address line. The goal is a break any specific visual association between the billing icon and address line 2.

The second example is the same, however I add more of a toggle-style element visualization.

Finally, in the last example I ditch the vertical alignment and go horizontal.

You can see the look is generally GMD-inspired, though I use it loosely as I don't think GMD is the best approach for an enterprise-system, at least in my case.

Whatever I do will more than likely become a pattern that is occasionally repeated in an enterprise system that (after many years) is only now getting UX attention and a standardization of UI.

Answer 1

You could use sectional tabs (as opposed to tabs at the top level) with an underline:

If you feel the need for typographic balance, another option is to add a subheader over the contact section (not too sure about this alternative):

Users won't have to discern the icons, which are not clear at the present (Pectoralis Major pointed this out in the comments). I pushed down the contact section to align with the content of the address, but the tab line shows the end of the left section.

Also, just wondering; do you need to say 'Edit Customer', when you have these containing panels? I tried shortening to just 'Edit'. At least to my eyes, the containing panels suggest what it is that's going to be edited (just my opinion).

I've used the all caps for some typographic distinction, which are similar to tabs in material, and mobile:

Answer 2

I'd theorize that the icons won't scan as buttons in testing. Therefore the second design, putting the icons in something more recognizable (a toggle) would likely test the best of the three. Another option is to use tabs. In defense of using the old familiar tabs:

Any type of innovation will incur a cost for users and for designers. For users, because it will be a new pattern that they must learn and that takes them on an untrodden, slow path. For designers, because they must provide extra scaffolds such as contextual tips and progressive disclosure to help users navigate on the new path. The cost of implementing these tools can be significant. Think twice at what you are trying to achieve — is it worth departing from the well-beaten path? Does it make sense to innovate or will you be just as well served by a traditional design?

Raluca Budiu in NN/g, "The Power Law of Learning: Consistency vs. Innovation in User Interfaces"

Answer 3

This is a perfect use case for tabs. The Material Design design specification for tabs has a number of options for layouts. You could try something like this:

Or like this:

The icons you've used in your examples are not clearly navigational aids, and they look like the phone and email icons. Maybe power users will come to understand them, but their function is not obvious.