1

I've been thinking about experimenting with a layout like the one used in the Apple Music app on iOS.

The interface is the "bubble" interface that is used to choose your preferences etc...

enter image description here

But I don't really know where to even start with this. Is there a name for the general idea of creating these sort of semi-physics based layouts?

Would love to know what it is I need to search for in order to learn how these work.

I'd be writing it on iOS in Swift but looking more for the name of this sort of interface so I can learn the principals behind creating it.

Thanks

  • Relevant: codepen.io/controversial/pen/wWVGOv – DasBeasto Dec 1 '17 at 16:52
  • Are you also thinking about how to make this UI accessible to blind people and other keyboard-only users? – Christophe Strobbe Dec 1 '17 at 17:15
  • @ChristopheStrobbe no, I'm thinking how to go about experimenting over the weekend to see what I can create for an iPhone app. Would like to read up on UIs like this as I have seen a few in the past (the most recent one being the AppleMusic app) and wondered if there is a name for the technology. – Fogmeister Dec 1 '17 at 17:21
  • All the animations/movement is easing/tweening. If you haven't learned about tweening or easing yet, start there. That's using equations to mimic inertia, gravity, friction, etc. in animations. Here are Penner's easing equations: robertpenner.com/easing – moot Dec 3 '17 at 18:48
1

This is an interesting question because there are some discussions around the actual usability of an interface like this, and the only way I can try to describe it is to compare it to other existing or well-known design patterns in terms of its attributes:

  • Layout - unlike the popular grid layout, this 'bubble' UI is not constrained to a specific or ordered arrangement; the elements can also move around on the screen freely
  • Unit size - unlike a word cloud, the individual elements of the UI is not based on some weighting factor applied to adjust its prominence on the screen
  • Style - with a consistent colour and a dynamic look & feel, I think it is hard for users to find where specific content is without having to look carefully at the text so additional styling would help identify and highlight elements

If you can find the right design problem to solve using this 'bubble' design pattern and address some of the potential usability issues, I think it would be an interesting interface to implement.

1

I have used a game engine Box2D usign LibGDX framework for developing Apple Music like bubble selection screen for Android

You can find the source code on Github - https://github.com/mohitKejriwal/Bubble-UI-Android/tree/Bubble-UI-Android

Hope it helps you.

1

I made one for web.

The obstacles involved in this are:
1. center and wrap texts in a circle
2. circle collision and animation

The first one, on the web, is kind of hard to tackle. D3js can do the job but is too huge for this. Its just a function with a few lines of JS.

The second one, is easy. D3js also can do the job, but its hard to customise. To add customised functions, I made a wheel.

Check out the demo: https://bofei.io/floatingCircle
And the source: https://github.com/bofeiw/floatingCircle

Currently there are many things to improve, so welcome PR!

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.