Home » ui

Tag: ui

The Online Meditation Room

I was curious how others designed an online meditation room, and I was a bit disappointed. 

I looked at the first 20 results from Google. Not all the pages were designed to be a meditation room, but some of them were. But the disappointing part was that the “room” was usually a simple page with a list of audio files you could play. 

Maybe there is a good reason for this. After all, once you choose your meditation and click play, you close your eyes and focus inwardly, and it no longer matters what the page looks like.

But let’s think about a physical meditation room or a temple. In that case, you have a distinct visual experience as well, not only an auditory one. Space and sometimes beauty remind your brain that this room is a sacred place. It invites your mind to relax and slow down. It is an anchor and a reminder that you are about to enter a meditative state. Sometimes you can feel the smell of incense or hear the bells ring, or soft music, or running water. 

Perhaps an experienced meditator does not need all these cues, but for beginners, it may help, and they could make the entry to meditation so much more enjoyable. 

How can we bring this online? 

We can’t generate smell from a webpage (yet), but we control the visuals and the sounds. 

What if, instead of a static page, we generate an experience of entering the meditation room. 

It could start with a white page, where your choices are softly faded in with smooth transitions, with great care to always have enough space between the elements on the screen to create the feeling of openness. 

It could play some gentle music in the background or nature sounds, or the crackling of a fireplace. And once you choose your audio meditation, everything fades to black, inviting you to close your eyes and enter the meditation. 

We could take this further and make it a group experience where more people join the same room, and the meditation would start at the same time for everyone, helping to keep everyone in sync and enhancing the experience. And we could configure the room experience to be a “Nature Room,” a “Void Room,” a “White Room,” a “Crystal Room.” Each one would have a different set of visual and audio cues that would make it unique.

I wonder if anyone would find such an experience valuable and wonderful.

Community Software: FLARUM

My latest insight is that you grow faster, and it’s more fun (and challenging) when you have a community!

Because of that insight, I am consciously looking at how other people are building their communities, and, being the software nerd that I am, my attention goes to online communities. 

A new player around the block is making some noise when it comes to community software. And that is Flarum.

Here is the promise:

“Forums made simple. Modern, fast, and free!”

I have spent a couple of days taking this forum for a spin and testing out this promise. The short version is that I am impressed. 

Let’s break this down in a post that will be somewhat technical. 

Forums Made Simple

“Forums made simple” – I believe they fulfill this promise. The team behind Flarum chose to focus on what makes a forum a forum: the ability for users to create discussions and respond to each other. And that works beautifully well. However, to have great software, you can’t stop there. Otherwise, anyone who can follow a Larcast could roll out their forum in Laravel. The team made the forum simple and provided a scaffold and a framework so you can then make it as complicated as you need! 

Modern

“Modern” – This promise is also kept. There are two sides to this “modern” feature. 

First is the end-user: do they perceive it as modern? And I would give them a “yes” just by looking at the mobile experience. I don’t want to say that it is beautiful because that is too subjective. Instead, I would say the user experience is great: it works, and it works as you would expect it to work. Of course, any old software can hire a designer and create a “modern theme/look” for their forum, but that is only one part of it.

The other part of “modern” is the internal workings of the forum. And you would need to be a developer to appreciate the beauty of Flarum truly. The internals might be something that the end-users or community managers might not care about. Still, it will be important for the person in charge of maintaining the software on the server. 

To highlight a couple of things:

  • Using `composer` to manage the upgrades and the extensions – brilliant! I have not seen this done before in a forum context, but it is such a clean way to reuse code. It is different from what WordPress is doing, where every plugin has to install its dependencies, and you end up with loads of duplicate code and potential conflict that is sometimes very hard to spot and fix. While using composer makes me happy, I am also concerned with the possible problems that may show up in the future and that we cannot possibly see right now. 
  • Making this a Single Page Application. The front end is now a JavaScript client that consumes the API that the forum exposes. This pattern opens up a ton of flexibility on how this platform can be used – including completely replacing the front end if you are brave enough. The only issue that I see is potentially some SEO problems that plague all SPAs. 

Fast

 “Fast” – another kept promise. The lighting fast page loads were the very first thing I noticed about this software. It feels so snappy! Aven the search function feels fast. The high-performance is another result of the internals, and so it’s not something that older software can pull off just by “modernizing their look and feel.”

Free

“Free” – this is technically free… with a big “BUT.” 

To install Flarum, you need to run commands in your shell. And if you have no idea what that is, that is where the “Free” problem starts!

The power and performance of Flarum come at a cost. At the time of writing, you need to be pretty nerdy to install it and feel comfortable about it. Sure, you can copy/paste the commands in the tutorial, but if you don’t understand what you are doing, any tiny problem can be a game stopper for you. So even though the forum is free to install and use, you might have to pay for an installation service (that the Flarum team might provide in the future), and you also need to buy hosting where you can use the shell and the PHP composer software. 

All of this makes me think that Flarum might be best for companies that can hire such a developer and purchase a server with the required specs. 

And speaking of companies, this leads me into another potential trap of “Free,” and that is: you don’t want to build a community using software that will not be there for you in the long run. And if nobody is paying to help the software grow and have the bugs fixed, how long will Flarum be around? For a company, this is a risk that needs to be evaluated, and it can make a managed/established solution look much better in the long run, especially because it is not free.

I see the team behind Flarum making steps towards launching a managed solution, which will provide a stream of income and invaluable feedback on making the software better. And they may also establish a service of paid support that can provide additional incentive to keep this project going. 

Until there are some clear signs that Flarum is here to say, I believe it would be risky to build your community around it if you want to play a long-term game. But if you need to launch a project quickly that requires a community around it, you should give Flarum a try! 

The Competition

Flarum reminds me a lot about Vanilla Forums, and I believe that if they play their cards right, they could become their main competitor. 

You can get all of Flarum for free (if you have tech chops to install and manage it), while Vanilla OSS is very limited compared to the cloud option.

Using animations the wrong way

Website builders and new technology have made it super easy to add animations to your web pages. But just because you can do something doesn’t mean that you should.

When I first learned how to animate page elements, I wanted to animate everything. Make things flow, pop, fade in, fade out, create a dance on my webpage. In my mind, slick animations would make for a luxuriant experience and showcase how edgy my design is and how smart I am.

That theory quickly falls apart when you need to load a page often, and you have to wait for animations to kick in or finish, and everything seems to fly in all directions.

For movement to look good and guide the user, it needs to be choreographed, have a flow, and purpose: it needs to guide the user into experiencing your site. Otherwise, it quickly turns into jarring distractions!

There are two main uses of animation that make sense:

  • evoke a feeling or emotion
  • help increase your conversion rate that will turn visitors into customers.

The first use is very subjective, and I believe it is more art than science, and it takes study and practice to get it right. Just because you now have a video recorder on your phone does not make you a master motion picture creator. In the same way, just because you can animate things, it does not mean it’s easy to create a coherent storytelling experience. 

The second use, which is to increase conversions, I have much more experience with, and it is easier to measure and get right.

Here are the rules of animation

  1. Do not animate anything unless you know it will bring you closer to your goals.
  2. The animation must have a purpose. E.g., a blinking notification icon that needs the user’s attention; a sliding in and out navigation panel to will subtly inform the user where to go if they need to find the navigation element; a page transition animation that will hide a slow loading time keeping the user engaged with the page. 
  3. The animation must make sense. E.g., text flying in will undoubtedly grab the attention, but it is impossible to read until the animation ends.
  4. All the animations on the page must work together. They need to feel choreographed. So not only it’s more pleasing to the eye, but if done well, it shows to the user where everything is and how to navigate the site best.
  5. If your user notices the animation instead of the story you are trying to convey, you are doing it wrong.

Some good examples:

  • Apple products are great examples of animation done well. Both the website and the user interfaces on their devices. (At the moment of writing, there is no animation of the home page. As I said above, just because they can do it doesn’t mean they should do it!)
  • Displaying live data in animated charts can use good animation that makes it easier for the brain to digest what is changing. 
  • Navigation hints: new elements (like dialog boxes) slide in from the right, and when you dismiss them, they slide out to the left. New pages fade in. Notifications pop up. Using a consistent system like this allows our brains to quickly figure out what we are looking at just by how it is animated. 

Keep performance in mind.

Animation requires more resources in both bandwidth and processing power. In addition, page speed affects conversion rates. Therefore, if you choose to animate, make sure it will not affect your loading times and works fast enough on older devices.

Resources

Audit your website animations and keep only those that get you closer to your goals.