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.

tight data switcheroo 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.

| improve this question | | | | |
  • What about tabs? I think they would be a good option and would not need much more space. The icons aren't a good solution. – Pectoralis Major Aug 10 '17 at 13:48
  • Any thoughts on the specific visual design? I played around with tabs but didn't arrive at anything that looked nice (as it looked dated) or that I felt substantially impacted the interaction. Here's a more GDM-inspired approach to a small tab: drive.google.com/file/d/0B0AhQON9cOZZWVVLT3p1dE00d0k/… – Wayneo Aug 10 '17 at 14:09

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

enter image description here

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):

enter image description here

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:

enter image description here

| improve this answer | | | | |
  • Thanks -- I ran with your tab/line idea and it looks great. Thanks for the quick feedback! – Wayneo Aug 10 '17 at 19:27

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"

| improve this answer | | | | |
  • 1
    Thank you for the link! I've been preaching "consistency vs. innovation" for years, but it's fantastic to see real data behind it. – Wayneo Aug 10 '17 at 15:50

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:

enter image description here

Or like this:

enter image description here

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.

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.