Common Bugs in User Interface Design

Posted by Deeksha Agarwal | January 20, 2018
Manual Testing β€’

7595 Views | 2 Min Read

In human physiology, vision plays a major role as 83% of the information humans perceive is via sight. So, your website should never lack in visual appeal. In web design, this is even more important. Every new iteration of design leaves some minor deviations. Sometimes, these minor visual deviations can be very hard to fix or unknowingly break the whole user experience. Hence, it is necessary to make sure that your website provides a perfect and working interface design to the user.
So the question is, what are the factors that you have to lookout for while testing your website or app’s interface design? What are the most common bugs that are there and can go unnoticed?

So to make this easier for you we’ve collected some of the common bugs that can be encountered in user interface design.

What are they?

1. Layout

  • Misalignment (eg: double margin float bug, staircase effect, IE6 box model bug, misbehaving floated layout, float drop bug, guillotine bug, IE resize bug)
  • Overlapping (eg: auto overflow)
  • Missing content/images
  • Spacing (eg: linewidth, line height, unwanted space between list items, vertical spacing bug)





2. Font

  • Font would be of same family but different type (eg: helvetica lite was the font but developer had put helvetica regular)
  • Fonts of different family used
  • Mismatching of font size




3. Color

  • Mismatch of colour code due to multiple reasons
  • Button colour should have changed when disabled but it got missed



4. Content

  • Upper/Lower-Case differences
  • Mismatch of letters/words
  • Mismatch of images
  • Spelling mistakes



5. Images

  • In certain browsers such as IE, sometime it is noticed that images tend to flicker. One of the reason being that browsers is unable to cache the background images properly and has to reload it again and again






These are some of the common visual UI bugs that sometimes go unnoticed by human eyes and therefore are very tricky to find. But you can be assured that out of thousands and millions end users that will visit your site, at least one will find them. Which is quite embarrassing, isn’t it?

So, in order to figure out these visual UI bugs before end users point them out, we’ve developed a special feature, Smart Visual UI Testing. This feature will allow you to compare images: Baseline image with comparison images in order to find all the visual UI defects with just one click.

Written by Deeksha Agarwal

Related Articles