This time Design Time will be all about do(s) and don’t(s). I tend to run into some really annoying things on the Internet, mutations of auto-play video and register [with your “fake-trolling-e-mail-you-never-check”] to browse, and finally started writing these gems down.

I will be listing things I can fully explain and do my best to suggest at least one alternative which in my, testers or users opinion would introduce an improvement.

If you want to have auto-play video, start quiet

Scenario is really simple with this one. You open link in a new tab and are greeted with a long, still loading square in the middle of a content, suddenly sound and image go off and you are listening to noise, since you don’t care about any information except where is pause or mute button – noise. There are lots of variations of this situation like opening multiple tabs simultaneously, which was worse before sound indicators on tabs became cool, but top mutations I recently found out is auto-play without pause, without X to turn video off, with no mute button and click unbound from stop – I triple-checked, investigated and left.

Default, auto-play embed is wrong because:

  • viewer doesn’t care about it’s content, he is desperately trying to shut it down with volume cranked up and headphones on;
  • if people didn’t expect any sounds, they won’t enjoy them, unexpected sound puts us in defensive mode;
  • very often you can’t predict visitor’s environment, maybe your video just woke up his baby he was putting to sleep for last 2 hours, interrupted classes or a meeting – good job mr. dj-developer.

These are just 3 ways how to make your visitor, and potential regular viewer, angry in less than 15 seconds. In most cases people will just turn off the annoying tab and simply go to competition – after all, Google just served them N pages of search results.

How to fix it?
Tone it down a bit. Video should grab attention, but not at cost of user’s comfort. The simplest compromise is setting default volume value at 0. This way audio won’t disturb anybody’s peace and motion of picture will generate interest. If a visitor is keen on to see a material from an embed, he will increase a volume, adjusting it to his environment.

Twitch stream muted on start

Common, but tiny bit harder, is putting a preview picture of a video content with play icon on top of it, suggesting video material and loading it only after interaction with preview.

Between these 2 options you balance from information to attention, pick solution wisely.

Don’t make it harder to use your website

This one isn’t too much about what’s wrong, but what can be improved; little things like that come out after people get too comfortable and they suddenly run into exception. I was using 2 websites very frequently in recent month or two, one of them is auction service when the other one is a price [comparison] catalogue.

What to add then?
If you ask yourself about the most common activity on each of these [websites], you may say buying, selling, browsing or reading specifications, but it’s even more fundamental – it’s simple searching by phrase. Now, if the main activity on your website (catalogue, shop, search engine, listing etc.) is searching, consider activating prompt, in that big search bar, on load. Does it hurt people who will switch to mouse and go categories road? No. Does it help people who directly visited your address and are ready to type phrase to search? It certainly does.

You can check if comfort is considerably better, do a search via Google.com and then go to Amazon.com or ebay.com (I didn’t hot link so you have to actually type it up there.).

Don’t strip items more than you have to.

That’s something I got myself into with the current design of this very website. As I’m not a huge fan of the hamburger icon (you can read about safe use of icons in the previous Design Time post) to indicate menus, I decided to put simple “MENU” text-button. I guess too few questions have been asked before setting it up, because with time passing by I felt there is something wrong with the menu indicator. By the way, Belar Design is mostly blog-focused, so extensive navigation is not what I’m aiming for.

Balance tip
Here comes the tip, don’t remove more than you have to and don’t add more than you need to. Simple border for the MENU was good enough to mark presence of the menu button and prevent expanding menu into full navigation bar; which would most likely destroy balance in design. If asked, I would position mentioned solutions in following order:

menu balance

To back this up, here is a small data from Luke Wroblewski.

I want to know what’s going on, don’t fool me

Again, activity which isn’t really a problem until expectations start to grow. Let’s go with simple examples:

  • you hovered a carousel/slider, did it stop or you should hurry and click before it continues to spin?
  • looping gif means it’s loading, but is your connection slow or content is so heavy? Does it load or just try to piss you off?
  • you pressed go-button, did you send it? There is no confirmation, should you send again?

As you can see lack of information generates questions and in age when delay is represented by milliseconds, questions multiply really fast. That’s why your actions should be transparent, user should know what’s going on even if she/he has all time in the world and doesn’t care.

Bandcamp recent sales slider

Great example I bumped into recently is Bandcamp’s feed at the bottom of their websites. It’s carousel-like representation of the most recent sales, new data initiates sliding effect to generate new space, but it pauses on hover and… it informs you about it.

It’s not a jaw-dropping feature, but personally I found it really handy. It communicates that I have as much time as I need to see titles, artworks and when I’m ready, I can proceed to a particular item or let new items slide in.

Don’t push it, let it grow

Idea of promoting social media isn’t bad itself, even if 80% of your fans are inactive, it’s still important to have them on your side. After all, potential partners, sponsors or investors are very often taking a peak at your community and if there is none, they will judge you – if you can’t reach people, how are you expecting product to be promoted.

Facebook and Twitter made people invent different kinds of ways, tricks and traps to get every Like, RT and #tag they can, but sometimes they don’t realize that mechanism of suggesting, becomes bragging machine discouraging positive activity of contributing to social feed (Yes, people treat Like/Follow action as a contribution.).

Let’s get it straight, viewers can’t say if they like something before they actually appreciate it. Content can be ok and would reach positive judgement, but like consists of much more things. It’s how you approach recipient, how you present your content, do they like a cause and finally, do they want more of it? If positive, you get a Like.

That’s exactly why pop-up on page load is so wrong, it’s like giving a draft of an album to editor and, before he touches the front page, putting your hand on it asking “Could you tell everyone you like it, before you start browsing?”. Except the fact that you put unwanted pop-up in the way to recognize the content and told him you don’t care what are his thoughts. Why would anyone like such behavior?

Make-him-an-offer---Godfather

How to reach them?
Articles popping up in the middle of an article share exactly the same story, but there is less invasive way. Instead of polluting whole screen with dim layer and smashing front of a website with “like me” or “sign up to newsletter right now” square you can use slide-out on a side of a website. Little square sliding in at the certain point isn’t scary; motion will take care of attention the same way video does and you won’t cover a content. It’s not so friendly for mobile devices (let’s say tablets are still okish), so you could consider revealing “call to action” when user reaches the end of an article – in similar fashion as we place share area, but with a little spin of sliding down to generate some initial interest in a clean way, with movement.

The End

Stay reasonable when implementing different ideas and don’t blindly copy them from others. Always ask yourself if you like how it works and if it could be done better, the fact that a solution is working on a certain websites and for their target group, even if they are a big player, doesn’t mean you should follow. Also, don’t forget you can always test and ask your community about their opinion.

UPDATE:

Not even a week after post this wonderful topic showed up, which is another great example how NOT to gather Likes or Tweets. Personally I would say much more effective would be to just ask for sharing when items proceed to download and I’m pretty sure if your content is as good as you think, user will share it with Reddit or Twitter and give you a deserved Like.