Home » ux

Tag: ux

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.

Although important, nobody likes tests!

I should not have to write this, but testing your web application is very important, especially if you care about your brand being perceived as premium. 

And by testing, I don’t mean “does my homepage load fine?”. I mean the comprehensive end-to-end testing and stress tests to ensure your app still works when that marketing campaign hits. 

Even though good tests are essential in the quality assurance process, I have seen websites and applications that do not fail gracefully, with a friendly error message that explains what happened and offers a way to move forward.

Many software workflows attempt to convince the developer to test first or make sure their code is testable, but most developers do not use them. 

I thought about it, and I believe I found the reasons. 

Nobody likes tests because:

  1.  they are boring to write
  2.  it is not easy to write code that is testable – you need a specific mindset
  3.  they offer zero visual feedback to the paying customer – so in that sense, it is invisible thankless work
  4.  they need to be maintained along with the code base that does something 

Tests are a tough sell to both developers and their clients. Most often than not, we proceed with the attitude: “we will fix it when someone complains!”

On this blog, I care a lot about value. And from that perspective, I will say this: no client will ever come to you and say, “I need a website that will require about 20,000 tests for a code coverage of 90%”. Tests have zero value to them. Instead, they need a solution to a real problem, like: 

  • They need to build a premium brand. 
  • They want to sleep well at night, having confidence that the vast majority of the app functionality works and will continue to work even under stress. 
  • They need actionable data to help them decide where to move next with their web application: what is the bottleneck in performance? What is hurting conversions? 

These are all items the client cares about, and a possible solution is to write tests. But what you are selling is peace of mind, not code coverage. 

And yes, in some cases, especially for MVPs, tests are not essential for the bottom line, and so even if you know they are important in the QA process, that may come later once the product proved to be a hit. 

As a developer, I would get into the practice of doing tests and writing testable code. It is an excellent skill to have when things change faster and faster, and interoperability creates more complex systems. 

And as a client, I would put some monetary value on my peace of mind and knowing the app won’t break and see what solutions I can buy for that budget. 

 

User Feedback – why is it important?

There is something that I noticed while designing web apps and user experiences. The client sometimes has particular requests about what font to use, what images and colors, and how the interactions should happen.

And if I probe why do they want things to be done like that, I most of the time get the answer that this is how they like it.

In a way, it makes sense. It is your site, your brand, and it should represent what you stand for and show your brand’s personality.

But when you are offering a service, and you want to help your visitors achieve something, you need to put their needs above your desire to have the website a specific way.

Your visitors expect to read your site easily. They expect a button to look like a button. And a clickable link to obviously be a clickable link. It would help if you found a balance between being familiar and being unique. If you go all the way on the “unique” side, your visitors will be very confused by your offer and wander someplace else. So this very distinct design is not really serving your customers, is it?

What is a better way to go about this?

You can ask your visitors for feedback and listen to what they have to say. If they find it challenging to make use of your offer, you need to change that, even if it’s something you like a lot about your web site.

You also need to ask more people, not just one. How many more? It depends on the size of your business, but the more you can ask, the more reliable the data becomes. And then, you can build a design that both showcases your brand and what is unique about it but also serves your customers in a way that they expect and understand.

I know this is not always easy. I’ve been guilty of this approach myself, many, many times in the past. I was blinded by how “elegant” I thought my solution was that I disregarded the feedback that showed it was not working for my potential customers.

If your web presence is just a way to express yourself, your art, your ideas, then it’s OK to break the rules and do something “crazy.” Just know that serves your need to express and bee seen. But if you want to provide a service, the marketplace will quickly teach you a lesson, when very few people engage with your content, because it is too hard, or too different.

In today’s world, it is easy to create a website where you can have both worlds: customer-centered and another that is “self-expression” centered. And they can both work together and support each other. But now your audience has a choice. Do they want to explore the new, edgy thing, or they want to benefit from the offer that will serve them quickly?

In conclusion: ask for feedback from your user! And be grateful for the feedback you get, especially if it’s “not good,” because it points you to things you can change that may lead to dramatic improvement of engagement with your offerings.  

Building a learning community website

The Challenge

Build a learning community website with the following requirements: 

  • subscription-based (behind a paywall)
  • forum for discussion
  • library with classes and materials
  • live calls with the students and the teachers
  • newsletter 
  • easy to use for both the young and older audiences 
  • accessible 

The solution

– base platform: Joomla!. In my experience, it is more secure than WordPress. It is component-based, which to me, makes more sense when you want to build a platform. Also, because it is component-based, it can be faster than WordPress that has to load all the plugins all the time.

– for the forum, I’ve used Kunena. I cannot say I like it a lot, but it was the natural choice for a Joomla! based platform. The interface is also common enough to make sense for an older audience. I have considered using Discourse, but it failed for the accessibility requirement.

– DocMan was the choice to manage our document library. The good part is that it can protect documents from being publicly accessible. The bad part: it feels clunky to navigate on the front end, and for some reason, the download feature is not working correctly on iPhones (but that could be Apple’s fault)

– after trying a couple of things, Zoom is the clear winner and choice for the Video Live Call that we have at least once a month.

– for the newsletter, the AcyMailing component is the professional choice. I like the flexibility of it better than MailChimp, and we get to have all the data. The challenge here was that our server is not doing well with email deliverability, so we did have to get an external mailing service like Mandrill (from MailChimp) to plug into this component. A big lesson learned here: if email deliverability is important to you and your users go PRO with a paid service. It will save you a lot of pain and headache. And in the long run, it may actually save you money by simply providing a reliable experience for your userbase. 

– ease of use was accomplished with custom modifications for the mobile version and by using a user experience that most people are accustomed to. For example, I have discovered that Discourse tends to not make sense for people used to the older forum software.

– accessibility meant we could not use Discourse. And to also consider a high contrast theme for specific users.

– for handling the subscriptions, I have used Community Builder and their CB Subs plugin. I cannot say I love it, but after a lot of customization work, it does the job right and reliably.

Add-ons and Customizations

– added a calendar to help better organize events in the community. DPCalendar does a great job with this.

– added a private messaging system – Udeimm – the code base is super old, and it tries to maintain backward compatibility with older Joomla! software. But it works. And with some custom work, it works very well. I like the fact that it integrates with CB and Kunena. (Oopsy… looks like development for this component has ended. Which is a shame. It was the best PM solution for Joomla!)

– for the forum, I had to code it a tagging system to allow users to tag each other using the @username system. This increases engagement and makes it easier for the users to let each other know if there is something of interest on the forum

– I have installed JChatSocial – it was a “cool thing” in the beginning, but I don’t see it as a popular feature. Also, it is not accessible, and the developers do not plan to make it so. With this plugin, I also have some performance concerns. I don’t think it can work for large communities. 

– added a custom made notification system to make it easier for a user to know when something important is happening: like an event, or announcement or someone tagging them or sending them a private message

– added web push notifications (for those that use Android or the desktop) – allows for better engagement and for users to more quickly respond to what is happening on the platform

– added a custom Joomla component to allow users to track their progress through the material on the website: the classes, the events, and assigned homework

Why a custom build? 

If I were to start again today, I would probably look for a platform that has all my requirements built in. I would also consider a hosted service. This would free me up from having to maintain, update, and secure the software. And I could use the free time to engage in other community-building activities. 

However, I am a nerd at heart, so I would miss the flexibility that I currently have to get my hands dirty and customize the entire experience in the way that I or our users like it. Because of this, the platform has grown and adapted to our users instead of forcing the users to adapt to a “ready-made” solution. 

This is a choice that I constantly have to make: do I want to be “the developer” or “the manager.” The developer can feel more rewarding as it appeals to my coding skills. But the manager is enticing too as get to focus more on the human aspect of it, and less on the technical side. 

I will conclude that I am proud of what I have built for WalkWithMeNow.com. 🙂