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.
Hey! Do you know the background-clip property lets you control where background images are shown, and the background-origin and background-size properties allow greater flexibility in the size of background images.
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
Check this out CSS background-repeat round and space : It allows CSS background images to be repeated without clipping. Since it’s a property, it can be altered with CSS to reposition, distract, or focus attention.
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.
Do you know CSS3 Border-radius (rounded corners) is used to create rounded corners on all four sides of an element’s border. It also covers support for the shorthand.
Top comments (0)