The Incredible Power of Dynamic User Interfaces
A few weeks back I was taking the tube to see my friend in Soho in Central London. For those of you that don’t know what the tube is, it is the British version of a Metro, but you know, with its own name because… Britain.
I, like many Londoners, use a travel app called Citymapper to get out and about in the city. CityMapper is a more niche version of Google Maps, geared to help busy city people save those precious minutes vs. the less accurate but all-encompassing Google Maps.
This is what a typical CityMapper UI looks like:
Pretty standard. Easy access to different modes and so on.
I got to the bar and had a great time with my friend. We stayed in SoHo until around 3AM, at which point I started to think about a french exit. As usual, I opened up my CityMapper app and started to think about how to get home.
But I noticed something different:
This wasn’t what I was used to, and therefore I was surprised.
But it was better.
It was more useful. It was 3AM and besides an impromptu after-party, the only reason I would open Citymapper was to get home.
So, being a Designer, I decided to take some screenshots while analysing this marvellous discovery.
This is the comparison of the two states:
The Get Me Home section had completely changed.
Not only was it now dominating the key search & action section, but it also has a lovely bedframe icon and travel time underneath.
It had dynamically changed.
I, as a user, hadn’t actually done anything differently.
The only thing that had changed was my location and the time.
I really appreciated this feature from CityMapper. It was a very smart change in the UI. I initially wanted to call this Dynamic UI, and a quick Google search led to me finding out that a definition already exists:
Dynamic user interfaces, or dynamic UIs, are portlets or pages that are dynamically created based on the definition of an existing page or portlet definition. A dynamic UI can be launched only by a portlet using the Dynamic UI Manager API. Because of its dynamic nature, the interface is not persisted in the portal database and has a maximum lifetime of the user’s session with the portal. The interface can also be closed prior to the end of the session either programmatically or by the user.
Other examples
This isn’t completely new and has existed in limited forms for a long time. Technically the battery meter on your smartphone is a type of dynamic UI. It will change colour as you progress through it. Those types of use cases are obvious, but what we’re seeing now are more interesting and nuanced ways to leverage Dynamic UI.
Apple is great at doing this. macOS has adaptive dark and light modes based on time. iOS16 started to do this with lock screens. They leverage ‘modes’ of focus to then show your custom lock-screen, wallpaper, widgets and more:
Now, these lock screens are mainly manual and can be engineered through automation. For example, iOS can turn a mode on based on a location that you have, but that needs to be set up by you in the first instance.
Customisability has always been a push for a digital product, and one hypothesis here is that even Apple, who steered towards strict design in their products, are now bowing down to Gen-Z-driven demand.
Ways to leverage Dynamic UI
The cool thing about this is the number of use cases one could have for mobile & wearable devices. These things track all sorts of measurements, the Apple Watch being a great example, these are just the health trackers:
Outside of wearables, there’s plenty that digital products can do to leverage Dynamic UIs:
- Adapt core functionality, as this will be used the most, and tailoring to specific circumstances can be very helpful
- Track many/different data points to bring more specific information to light at key moments
- Create intuitive changes, e.g. location and time can make people’s desires change and you should do research to be aware of what they might intuitively seek next
- Manual customisations when you have a large amount of super/established users, so they can control their usage too
And here are a few things you could track on your product, assuming the user gives you access:
- Time of day — e.g. Night mode turning on after sunset
- Location — e.g. CityMapper
- Events — e.g. Google Calendar or Waze suggesting travel times based on your calendar
- Speed — e.g. record workout suggestions on Apple Watch
- Connections — e.g. Bluetooth speakers and Digital Dashboards on Cars
- Temperature — e.g. A reminder to drink water when its hot out
The cool thing that CityMapper did and what you can do too, is combining these to create super useful Dynamic UIs.
Things to avoid
As Uncle Ben said (not the chef, the Spiderman character), with great power, comes great responsibility. Therefore its important to not go crazy with Dynamic UIs, and avoid a few pitfalls:
- Making large swathes of your experience dynamic, as it increases the account of recalling a user has to do and could be overwhelming
- Use data that is tracked without the users’ obvious knowledge (like location & time) to change their experience 👀
- Blindly copying other products — their users are going to have a different set of environments & scenarios to yours, so aim to understand your own instead of copying
User research is a powerful tool to use when you want to figure out how to leverage Dynamic UIs. Learning about what your users want to do, where and when will help you create the most intuitive experiences.
You can learn about how to do exactly that in this article:
Enjoy creating!
Sakky B,
Co-founder, ZeroToDesign
