Category Archives: Article

5 UI Choices that Damage UX

7 UI Choices That Damage UX-01

User experience is one of the most important factors from every product and UI has become one of the elements that can determine great UX. However, not all UI are great for UX as some UI will bring bad effects for your UX. Yet there are still so many websites that push certain design trends which actually cause negative UX. Some web designers may not understand that some UI may be bad, but some may do it on purpose. So, if you don’t know which kinds of UI that is good or bad for your UX, you better read several points below.

  1. Unwanted Modals
    The idea of a modal window is a smart concept. It allows developers add concept over the page without the need to open a new tab. But the real problem is the unwanted modals not the modal windows for they always drag down the user experience. In fact, you can find three different types of “unwanted” modal popups:
  • Exit intents which open when the user’s mouse leaves the page body, usually hovering the browser tab,
  • Timed modals that open after a set amount of seconds;
  • Scroll modals that open after the user scrolls a certain distance down the page.

From the above information, you need to re-think whether it’s worth it to apply an unwanted modal popup to your website. For it will annoy your users to get a higher conversion rate. But these unwanted messages also give modals a bad name, which is tough because they serve a real purpose in UI design. These can be used wisely, like with modal signup fields or information-based modals triggered from a user’s mouse click. Or you can make it annoying by just make it appear from out of nowhere.

  1. Guilt in Copywriting
    Guilt copywriting which appeared in modals had become a trend for years ago. This kind of copywriting annoys users but increase signups. You can find this type of copywriting in many sites. In fact, this writing can also appear in sidebar fields or in-content opt-in forms. This copywriting will make you feel guilt instantly as you close the window. For example, the subscribe button looks ordinary, but the cancel button might read “No thanks, design is not my hobby”. This strategy might work well from a marketer’s standpoint, but certainly holds little value from a UX standpoint.
  1. Slide-In Ads/Offers
    Sometimes in web you will find a small box slide into view from the side. This box is usually a feedback box for user testing, or it might be social sharing links or even a discount promotion. This is a good idea to get user’s feedback. But just don’t use it too much, at least 2 different slide-in boxes on either side of the page, not 3 or more.
  1. Nav Menus Without Padding
    Navigation menu in every site usually has padding around them. But, you’ll find that some padding isn’t clickable unless you click on the exact block area of the text itself. You need to take 30 seconds to move CSS padding from a link’s container element to the link itself. Even though, the navigation is still the same, but now users can click the link and the space around the link.
  1. Paginated Listicles
    Another UI design which can damage your UX is content with one-item-per-page listicles. This is because few persons will enjoy clicking the “next” button constantly to read through a clickbait post. Unfortunately, there are many websites that use this kind of UI. It is mostly about page views and ad revenue more than anything else. So, it needs not only the work of designer but also the work of webmasters to prevent any multi-paged articles.

The Rules of Responsive Web Typography

typography

Have you ever seen a text in a website that is easy for you to read that does not tire your eyes when reading it? If you have, then you have seen an art called Typography. What is typography? What kind of typography that is properly arranged?

The right kind of Typography
For a web designer, typography is the art of their design works. It is the science about the appearance of text. The purpose is to not only make the words look attractive enough to draw a conversation, but also helps text fulfill its purpose of communication. Therefore, to fulfill this purpose, the typography should convey appropriate emotion, so that a text can be easy to read. Then, how do we create a text that embodies emotion, yet easy to read?

Here are several factors you might need to know:

The Art of Readable Text
No other words can beat the art of readable text, and a readable text means getting the right size for the font, leading and measure.

You can use the following guidelines to ensure you have the right size as mentioned above:

  • Make sure it is easy to read
  • Set the line-height, the font-size, and the text width (typesetting)
  • Begin typesetting with a page that contains users’ needed information
  • The page should contain multiple elements, such as h1, h2, h3, body text and captions
  • Estimate the distance between readers’ eyes and the screen for different devices
  • Once everything is settled, start by selecting font-size
  • Measure the line-height
  • Test your typesetting choices with your audience
  • Make sure everything is right and suitable
  • Continue setting the sizes of other elements after finishing with typesetting the body text.

While getting the best result for the typography is important, it doesn’t mean it has to be perfect. Just do the best to convey your passion in your work.

Typesetting Other Elements
If you happen to choose the font-size for elements like h1 and h2 visually, you may need to reconsider it for these scales can’t be directly used for the web because they are built for print design. Therefore, you can use a modular scale. Construct it with the body test you’ve decided on and multiply it by a ratio numerous times until you get a scale. After constructing the modular scale, you can typeset the rest of your elements, picking a number from the scale as your font-size; then do the same process for the leading and measure setting, until you get a balance of readable elements.

Vertical Rhythm
Next, arrange the individual elements using a technique called vertical rhythm. In order for one element to flow harmoniously into the next, we need to adjust the thing that joins them up: the white space. This white space should be large enough to distinguish one element from another, but it should be small enough, so that the flow isn’t broken.

In order to get enough white space, you can use a multiple of the line-height value of your body text because we naturally recognize white space patterns within text. You can set the white space between elements to a multiple of the base line-height, and set the line-height of all other elements to a multiple of the base line-height to use the right vertical rhythm. Values like 0.5x and 1.25x of the base line-height can give you more flexibility.

Baseline grid, yes or no?
Where there is vertical rhythm, there is the concept of a baseline grid inevitably comes into the picture. Although it is helpful, it can be difficult to get the right vertical rhythm for beginners. Baseline grids can’t work perfectly on the web because the math in typography contains subpixels (like 24.8px) and the subpixels are handled differently.

Typography for Multiple Screens
There are three things needed from a design perspective. First, the distance between a user’s eyes and their screens are different depending on the device used for that. The larger and the wider the screen and the device, the more you need for the font sizes. Second, you need consistency in the proportions between the body text and other elements. When you increase the body text size, you have to increase the sizes of all elements as well. Third, you should increase the font-size of specific elements through picking a different number from the modular scale to control the visual hierarchy.

That’s all you need to learn! To sum it up, typography is the art of making a grandiose website that will not only make people effortlessly understand the texts, but also creatively convey the passion in creating it.

7 Pop Ups Tricks to Avoid Hurting Your SEO Efforts

Blog5June-01

Using pop-ups add in your website can be a confusing task. Especially since, Google’s mobile has just released its new update, Google’s mobile interstitial penalty. Many web developers are still arguing whether to use or not to use pop ups. In this article, we reveal 7 simple tricks to minimize the risk for using pop-ups without harming your SEO.

  1. Understand Which Interstitials are No-goes

Lately Google’s mobile interstitial penalty has become one of the most popular updates. “Interstitial” is a broad term that refers to most pop-ups, overlays, and modals. However, not all interstitials are considered equally intrusive.

As a general rule of thumb, your mobile page may be devalued if your interstitials are spammy, difficult to dismiss, or diminish your users’ experience. In addition of mobile indexing, this will hurt your positions in the SERPs.

Below are examples of interstitials that make your content less accessible:

  • Content-covering pop-ups which users are forced to close it before they can continue reading.
  • Standalone interstitials that appear before users can access your content.
  • Deceptive page layouts whose above-the-fold portion looks like an interstitial.

Moreover, there are some ads that Google’s known to dislike and has penalized in the past, including:

  • Classic interstitial ads and splash ads that interrupt users since they navigate between pages or before they reach your homepage.
  • Annoying window pop-ups that appear as soon as a user clicks on your page.
  • Welcome mats, new window pop-ups, and other intrusive ads.
  • Confusing overlay modals or easily redirects visitors who accidentally click on them.
  • Intrusive lightbox ads and pop-ups.

These don’t mean that all interstitials are forbidden for interstitials triggered by exit intent are still permitted.

  1. Continue Using Non-Intrusive Interstitials

If Intrusive interstitials are bad, non-intrusive interstitials are oppositely good for your SEO. Non-intrusive interstitials are information such as age verification interstitials, and cookie use notifications. It also includes other pop-ups, such as banner ads; slide ins, in lines and tabs. This is because they take up only 15 percent or less portion of the screen than it is recommended.

The important thing is to avoid covering all of your screen with full-screen overlays, welcome mats, and ad modals. Instead of using them, you can use other options, such as top banners and slide-in boxes.

  1. Switch to Timed Pop Ups

If you have to continue to use pop-ups and overlays, you can try to redesign and change the timing of your interstitials. For instance, you get used to place a pop-up right after a user lands on your page. Now you can display the pop-up before your users leaving your blog post.

Another idea is to limit how long pop-ups are displayed. A pop up that can automatically close after several seconds is way better than one that should be closed.

  1. Watch Out for “Gray Area” Interstitials

You might be surprised that some interstitials might be devalued as Google consider them as intrusive interstitials. They are sticky sidebars, related posts, share button, live chat boxes, and coupon pop-ups. Even though, they may not produce big negative impact on your SEO, but you better avoid them than sorry.

  1. Use Permitted (but Intrusive) Pop-ups cautiously

There are some ads that are definitely interruptive but aren’t penalized yet. This is because Google will inspect them later.

  • Page-to-page interstitials: We all know that Google values good UX, but page to page interstitials are not good UX.
  • Interstitials triggered by exit intent: Pop-ups triggered by exit intent aren’t penalized by the new update. To avoid landing on the wrong side of the interstitial penalty, you can place a no index tag in your code.
  1. Intrusive Ads on Desktop is still Allowed

The easiest way to solve this problem is by hiding pop-ups on mobile devices. However, you can keep using them for desktop visitors. In fact, you can find some pop-up plugins that allow you to display your ads on any particular platforms. However, this is not a permanent solution as intrusive pop ups would diminish your UX. Therefore, it could be penalized under a future update.

  1. Restrict Pop-Ups to Sources Other Than Google Organic Search

Another way to avoid the interstitials penalty is by finding your websites from other sources outside Google organic search results. In addition, don’t feel too pressured to switch, if organic search drives a lot of your traffic and it generates leads. Bear in mind that useful content is above the other things, so one or two interstitial ad won’t lose a website.