Continuous Test Orchestration And Execution Platform Online

Perform automated and live-interactive testing on 3000+ real desktop and mobile devices online.

Common Bugs in User Interface Design

Deeksha Agarwal

Posted On: January 20, 2018

view count23129 Views

Read time2 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)



Layout

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


Font Selection



3. Color

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

Color Selection

4. Content

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



Content Selection

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



Image Selection


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.

Author’s Profile

Deeksha Agarwal

Deeksha Agarwal is in Product Growth at LambdaTest and is also a passionate tech blogger and product evangelist.

Blogs: 42



linkedintwitter

Test your websites, web-apps or mobile apps seamlessly with LambdaTest.

  • Selenium, Cypress, Playwright & Puppeteer Testing
  • Real Devices Cloud
  • Native App Testing
  • Appium Testing
  • Live Interactive Testing
  • Smart Visual UI Testing
Book a Demo