Transforming Interfaces

The first time you meet a person you’re likely to interact in a way that is appropriate for that setting. If that person is someone you meet on a regular basis, as time moves on you will come to interact in another (more evolved) way. For example, you might not shake hands anymore, conversations would be more personal, and you will be more likely to disagree with the person and give constructive criticism. In other words, your interactions have evolved as you have gotten to know each other better. What if interfaces of systems could do the same?

The ideal interface for a beginner and an expert user might be very different. The most common design principle is to create a simplified, stripped down version for the beginners, and then another version with more complex features such as advanced search for the experts. This solution provides a binary interface for either beginner or expert.

The person-to-person interaction on the other hand is not binary; it is a gradual transformation over time. Is there a way we can create a design that gradually transforms over time to accommodate all of these intermediate stages? In this blog I am going to provide a few thoughts on how we could think about interface design in a different way.

Transformation from beginner to expert

Some of the differences between beginner and expert users include:

  1. Beginners need more prominent navigation so they don’t get lost in the system. As they use the system and progress towards experts, they will want more focus on the content so that the navigation doesn’t need to be as prominent once the users learned the system.
  2. Beginners don’t use all the features of the system and want unused features out of their way to decrease clutter. As they learn more about the system, they’ll want more features upfront and will no longer consider the experience as cluttered.
  3. Beginners want to start exploring the system, as familiarity increases, they will be more prepared to customize it to their liking.
  4. Beginners need the interface to limit the amount of data provided. Later on, they will want more data, and experts constantly asks for more information.
  5. Beginners need basic explanations and advice, but as the user becomes more skilled they need less advice. Still, when highly skilled users do need advice, they are seeking more in depth explanations or suggestions about how to use the system more efficiently.

Transformation

Think about your favorite shoes. You’ll notice they don’t look like they did when you first bought them, but you likely never noticed how they changed from day to day. In the same way, users will not notice small and incremental changes over an extended amount of time on the interface. Therefore, by slowly moving an element 1 pixel at a time, it would be possible to slowly transform a system from the beginner interface to the expert interface as users progress in their learning. This progressive change would allow the system to be user friendly to beginners in their initial interactions with the product and continue to support them in their progression towards becoming expert users.

Designs

With this in mind, let’s look back at the first two differences between beginners and experts I listed above. How might we be able to create transforming designs that support both beginner and expert user groups as well as the stages in-between?

Obvious navigation is more important than screen real estate for beginners: The system can start up with a large and clear navigation structure that later on becomes smaller and less prominent. In this example I have provided 4 snapshots of a transformation of the navigation. It starts out with a clear structure to the user so she or he can easily find everything.

The site starts with normal navigation links across the top of the page
Initially, the system has a very clear structure for the navigation to support beginners.

As the transformation progresses the navigation bar becomes smaller and splits up the navigation items into a left (Stocks, Bonds, Portfolio, Benchmarks) and right section (Settings, Profile).

The navigation in the top has started to become split up in two sectoins with space in between each other.
The navigation has become smaller and split up in a left and right side.

In a much later stage, the “settings” and “profile” can be hidden under the “username”. This transition will be more noticeable to the user. Since both “settings” and “profile” were located close to the ”username”, users are more likely to start their search around that area. In addition, it would be beneficial to make the ”username” more prominent as this hiding takes place. The reason for making it more noticeable is to make sure users find this collapsed menu.

The settings and user name is not visible anymore and the username is larger in size . there is also a small arrow next to the username.
The “settings” and “profile” has been moved under the “username”.

In the final stage, the username has become smaller and less prominent to allow users to focus on more important tasks.

In the final stage, the navigation is now smaller again to allow more space for content.
The username is now smaller and less prominent.

Hide features for new users: The system can initially have some features hidden and later on display more as the user becomes more experienced with the system. In this transformation the system initially only shows some features and keeps the rest hidden. As the user progresses in their skills, more features become visible. In the final state, all features are visible to the user.

Picture of a software with only a few tools visible to the user.
Initially the system only displays some tools to the user.
The same software now displays more tools upfront to the user.
As the user becomes more familiar the system shows more tools by default.
The Software now displays all tools to the user.
Finally, all tools are displayed to user.

The benefit of this transformation is that the user will learn to use the most frequent features first without becoming overwhelmed. Once they are experts, all the features are then made available and are easily accessible at all times. For these type of tools, the system might also want to start off with labels under each icon that later transform into “on hover” labels/tool tips.

Challenges

As with all new design ideas there will be challenges to overcome. Some of these challenges include:

  1. How will we determine the users’ beginner/expertise level? Should we consider everyone a beginner as they start out or could they potentially have some learning from previous systems?
  2. How fast should the transformation happen? Is one pixel movement for each time they use the system too slow/fast?
  3. How will we account for individuality? Some users learn faster than others. Does it mean we need to have some smarter algorithm making the transformation?
  4. Are there instances where transformational interfaces cause more harm than good?

Conclusions

For me, the question is not “will transformational interfaces be a part of the future?”, instead the question is “in what way will transformational interfaces be implemented successfully?”

There are two areas where I think this transformational design will begin to emerge. One of the areas includes expert systems such as the software commonly used by financial advisors. Another area will be semi frequently used interfaces such as online banking, Netflix, and infotainments in vehicles. The power of transformational interfaces is how they can support beginners, experts, and all stages in-between in a similar way a human evolves and adjusts to interpersonal interactions.

© David Juhlin and www.davidjuhlin.com, 2016