My App relies on good UX. Here's what I learnt re-designing its most important interface.

My app aims to make it as quick and easy to interact with (the right) tweets and people on Twitter as possible.

Engage with people → grow your followers + increase engagement
Do it in less time → more time to spend building your business

Simple.

But to execute this well, the UX needs to be top-notch, and the UI needs to be smooth.

I'm a developer, I hadn't trained to do this, I'm not naturally good at this, this is difficult for me.

As other founders will know, however, you need to learn a lot and wear many hats when starting a SaaS. If you don't, you will fail.

So recently, I sat down, read a bunch of content on UI/UX, looked at a bunch of apps I enjoyed using and figured out why I enjoyed using them.

Long story short, I ended up with this interface that I'm very proud of and enjoy using. (check out the whole thread)

What I learnt

Yes, of course, the usual principles are essential:

• Alignment
• Colour
• Spacing
• Typography
• Simplicity
• etc.

But in addition to this, there were a few things that aren't usually covered that really helped me.

Controlling focus

The name of the game here is speed, and what's the enemy of speed?

The mouse.

You take away seconds from the user's interaction with your app by automatically focusing on the right thing at the right time.

In my case, when the page loads, it automatically selects the first tweet and focuses on the tweet box. Then when you reply, like, or skip that tweet, it selects the following tweet, scrolls the page to that tweet, and focuses back on the tweet box.

You probably wouldn't notice it when using the app, but if it wasn't there, you would.

Making sure the user isn't left wondering

The interface should be obvious. If it isn't, the user will be confused. This makes your app harder to use, and your user will be slower.

Sometimes things aren't instant. APIs take time to hit, and data takes time to process. But, when users click a button, they shouldn't be left wondering if their click was registered.

Properly handling the states of an interactive element is essential.

Give some thought to whether the user realises they can interact with something (or not if it's disabled), whether they know they have interacted with it, and whether they know that the action they kicked off is happening.

I ended up rethinking my buttons to make sure the user always knows what's going on.

Also, don't assume that the user trusts that something has happened successfully. Give them confirmation that the action went through.

I use a simple toast with a link to the tweet they interacted with. This allows them to check it if they want to and builds trust in the process.

Make your interactions quick and snappy

When you are faced with a long list of items to get through, you don't want interacting with those items to be slow.

On every reply/like/skip, I used to do the action on Twitter, update the state of my app's DB, check for more Tweets on Twitter, process them in my app, and then reload the whole list.

The user was left waiting a few seconds after each interaction.

Not. Good.

I instead made it so that on every reply/like/skip, the front end updates immediately and pushes the action to the backend. The backend then does the interaction on Twitter and updates its state.

I removed checking for new Tweets, processing them, and reloading the list. It just wasn't needed after every action.

Instead, now the user can click on a button to load more tweets.

The result is that when a user interacts with a tweet, it happens instantly, and they can quickly move on to the next one.

Conclusion

You don't have to (won't) get it right the first time, and your app might need to behave differently from mine, but these points definitely helped my app, Tweet Tribe, to be a pleasure to use.

• Manage focus
• Don't leave your user wondering
• Make interactions snappy