Fundamentals of Good User Interface Designing, Development & Testing

2. Fundamentals of
Good User Interface Designing,
Development & Testing

3. Common UI Defects

4. Inconsistant font usage
Suggestion:
• Use default font from the system. Example: Arial, Segoe UI, Tahoma, Verdana, etc.
• Font size has to be consistent throughout the website / Web application / Desktop
Application.
• Avoid using unnecessary bold or italic for interface text unless if it is required.
GoodBad
Problem: Inconsistent font usage across the pages will distract the visitor and the
information provided in the page will be lost, also the site will look cluttered.

5. White spaces around fields/content/images
• Avoid white spaces or blank
spaces around fields, contents
and images.
• It makes the user to scroll
unnecessarily.
• The information and images
provided in the website has to be
very precise and clear without
having any extra spaces.
• Crop the images and reduce the
white space.

6. Spelling and grammatical errors
Suggestion:
• Make sure to double check whether the
spelling which we used are correct and
gives the exact meaning pertaining to
the particular scenario.
• User a spell check tool like ‘Wordweb’ to
check the spelling and meaning.
Problem:
Spelling and grammar errors may seem like a minor issue, but knowing the correct
spelling and usage of the words will make a huge impact in making a website more
professional looking.
Many people will leave a website, never to return if they find too many spelling or
grammar errors. spelling errors in JavaScript and URLs can make those scripts and links
not work.

7. Currency format is not followed properly
Suggestion:
• If you buy a product in www.amazon.com, the
currency value will be shown in Dollars ($15)
• If you buy the same product in www.amazon.in, then
the currency value has to be converted according to
the geographical region selected by the user. (`900/-)
Problem:
• A transaction site has multilingual support, so the amount will be displayed in ‘$’,
at times the currency value is not converted and changed according to the user’s
Geo Location.
• Some cases, the value gets converted, but the currency symbol is not changed.
Currency Symbols

8. Misalignment of “Numbers”
• Align numbers at the decimal point (or imaginary decimal point).
• Right-align a block or column of whole numbers or of whole numbers and text, as shown below.
GoodBad
Below is an example of using numeric values in different scenarios

9. Unnecessary effects/animations which affects
the performance of the page
• Information to the user is more important than flashy animations and special effects.
• Avoid unwanted effects and animations unless it’s necessary.
• Instead of flash, use JQuery / JavaScript.

10. Unwanted buttons and links
In some applications we can see both “CANCEL” and “CLOSE” buttons. The
user will get confused on which button to click and what happens if he/she
clicks on the buttons.
Cancel buttons don't belong on forms. They are meant for progress bars
and confirmation windows where system processes are involved.
In a pop up window, when the user clicks on “close button”, the pop up
screen should get closed. If the user clicks on the “cancel button” it will
cancel the action which is in progress.

11. Poor cross-browser compatibility
• Alignment & spacing plays a major role in look and feel of a page.
• Make sure the page or site has to be look consistent & similar in all the browsers
in all aspects like aesthetics, alignment, spacing, image size, font size etc..

12. Inappropriate error messages
The error message displayed to the user has to be informative, precise and simple, it
should not confuse the user on what to do next.
GoodBad

13. Handling rounded corners in various browsers
• Firefox, Safari and Chrome all support rounded corners through native CSS
methods.
• IE9+ will support rounded corners.
• IE6 to IE8 will not support rounded corners.

14. Flash contents overlaps the popup or overlay pages
By default Flash files are placed on a layer higher than all HTML content hence
overlaps.
Check the Z-index Value
Keep the z-index value to ‘0’ for the <div> which has flash object placed inside it.

15. Inappropriate input field length and value
Input field length value looks different in different scenarios.
• Product Name: The length of the input field has to be lengthy enough to view the
full content.
• Unit Price: we can have a maximum of 2-6 characters followed by 2 decimals if
needed.
(For example: The unit price value can be : 1500.00)
GoodBad

16. Wrong time zone validationand display
A time zone is a system that is used for relating local times in different
geographical areas to one another.
Usually system displays the server time to the users, which needs to be
converted based on geographical location and display the current local
time to the users.

17. Cross-browser compatible mark-up
A piece of code/UI Plugin that works in one browser found failing in other
• Compatibility is one of the major concern in developing a web application or a
website.
• The website has to be user friendly and guide the user to proceed further by seeing
the information provided in the page.
In the Input placeholder, the text is getting displayed in IE 10+, FF & Chrome
The values are not visible in <= IE 9. In this case we need to fix this by using a JQuery Placeholder plugin.
Good
Bad

18. Resolution
Layout collapses when the page is viewed in different resolutions
Use CSS Media Queries to tweak a CSS for:
• iPad
• Printer
• Responsive site
Chrome resolution setting 1366 x 768 px
Good
Chrome resolution setting 1024 X 768 px
Bad

19. The menu bar looks good in 1280 px width, but the same menu bar looks overlapped in 1024 px width.
Menu displayed in 1280 px width
Menu displayed in 1024 px width
… continued
Layout collapses when the page is viewed in different resolution sizes (Live
example of a menu bar)

20. Un supported third party plug-ins
Most of the third party plug-ins are developed in such a way to support all browsers.
Some plug-ins have some restrictions and will not work properly in older browsers (IE
5, 6, 7). Check and confirm, whether the plug-in will work in modern browsers before
implementing.

21. Empty containers/text areas
• If there is no data available in the backend, then we should not display an empty
container without the information.
• If incase the data is modified, deleted or updated in the backend, the unavailability
of data has to be conveyed to the user.
Bad Good

22. Inconsistent and inappropriate icons
• Irrelevant icon will misguide the user. The Icon used against an information has to
be relevant to that title and convey the information.
• The size of the icons has to be consistent and uniform throughout the application /
website.
Good
Bad
Good
Bad
Good
Bad

23. Did you know?
An application’s vintage can be determined by merely seeing it’s icons

24. Avoid horizontal scrolling
• While designing or developing a page, make sure there won’t be any horizontal
scroll within the browser window.
• If there is more information to be shown within a page, it has to be placed
accordingly and can be wrapped to the next line.
• Vertical scroll bars can be accepted

25. Did you know?
Placing important content on the left of a web page will increase user retention time
on your website.
The same results were reflected on websites whose language were read from right
to left, such as Hebrew and Arabic.

26. Pagination: No First and Last button/link.
• Pagination link is not working properly
• Most of the cases we forget to add <First> <Prev> <Next> & <Last> links in
pagination control
• Make sure to have these buttons / links
Good
Bad

27. Where is “Forgot Password?”
When designing or developing an application, we need to make sure that all the
essential/necessary information and links has to be placed on the page.
• Forgot password? is missing in the login screen
• It’s Forgot Password? and not Forget Password
GoodBad

28. Logical grouping
• Grouping & Segregation of form helps the user to get idea on what they are
looking for.
• Positioning plays a vital role for presenting the right information
Bad Good

29. Truncated Titles
GoodBad
On mouse over the captions should be displayed fully

30. Logo is not linked to home page
Need to make sure the Logo has to be linked to homepage across the
application.
It makes the user to easily navigate to homepage from any page throughout
the site.
Good
Bad

31. Don’t Rely on Search as a Crutch to Bad Navigation
According to a task test conducted by Gerry McGovern, over 70% of the
participants began the task he gave them by clicking on a link on the page
as opposed to using the search feature.

32. Image shrinking issues
When mouse over on 400 x 400 px
image a separate image of 1100 px
by 1100 px will be shown here
When mouse over on
thumbnail a separate
image of 400 px by 400
px will be shown here
Thumbnail image
size 100px x 76px
shown here
Large size image has been shrunk and used as thumbnail instead of
resizing

33. Overlapped text instead of wrapping around
Good
Bad

34. Not using 1px background image
Here is the 1px image used as a background in the below example

35. RWD size : 1024 px
Image Related Defects:
Failed to implement Responsive images as part of Responsive Web Design
RWD size : 320 px RWD size : 320 px
GoodBad

36. Images are not proportionately resized
Bad Bad Good
Please make sure when you resize the image, it has to be proportionately resized, it
cannot be stretched horizontally or vertically.

37. Improper usage of MaxWidth and MaxHeight
Good
Bad

38. Content misalignment when no image
• Content misaligned when image failed to load or no image
• Make sure to have the image, or place a ‘no image’ placeholder
GoodBad

39. Improper image format
JPG for smaller file size, PNG for transparent background etc.,
There is no universal image file format
that suits best for all scenarios. Every
type of image format has its own
advantages and disadvantages.
JPEG – Best All-Rounder
• Great for photographs and graphics with lots of colors and hues
• Large images to be compressed extensively without compromising the image too
much.
GIF – Best for Animations
As it is limited to an 8 bit palette with only 256 colors, it is not suitable for images with a
large amount of color, but is great for graphics with lots of flat color and minimal
gradients and also for basic animations
PNG – Best for the Web
Some believe it is the superior version of GIF, as it saves with 256 colors more efficiently,
allows for transparencies, smoother gradients and creates smaller file sizes

40. Failed to use opacity in applicable scenarios
When mouse over on a video, the play button has to be enabled with 50% opacity,
so that the user will get to know the video is ready to play.
GoodBad

41. Images are not optimized for Web experience
Original image without optimization Optimized image
60 KB2 MB
GoodBad
• Use an image optimization tool and optimize the image without losing the clarity
or details in it.

42. Did you know?
More than half (60 per cent) consider some tasks a waste of time when
using the enterprise applications
A survey carried out by IDC, based on interviews with C-level respondents
in seven different industries, verified that usability and flexibility are
important considerations when evaluating enterprise application software.

43. Tool tip over image is not provided
File name displayed as tool tip – image0021.jpg
GoodBad

44. Using copyrighted images
Provide courtesy note wherever applicable

45. Not using image caption

46. Failed to link the images to either larger view or to
the corresponding details page

47. Usability Defects

48. No filtering/sorting options in Tables
Problem: Sometimes the product listing or a search results page will have lot of
results where user has to spend more time to choose the one which he/she wants.
As a result the user may lose interest and leave the site without buying anything.

49. No filtering/sorting options in Tables
Suggestion:
• Display the product
thumbnails in matrix
format.
• Hover on the thumbnail
can bring the short
description.
• Include possible major
filters in the left panel, so
user can narrow down
the search result and
reach the desired
product quickly.
• Have a “Back to Top” link.
• Implement fluid layout
which can accommodate
more listings horizontally
in higher resolutions.

50. Complex navigation system
Problem:
• Multiple rows of tabs are confusing and intimidating
• First time users will feel difficult in locating the desired tab
• By repositioning the tabs to the front row causes more confusion and
complexity.

51. Complex navigation system
Suggestion 1:
1. Avoid multiple row
menus/ tabs
2. Have single
horizontal menu
with submenus
under each of them
3. If you have more
number of menus
which cannot be
accommodated
horizontally, can be
placed vertically

52. Did you know?
Form Labels Work Best Above The Field
A study by UX Matters found that the ideal position for labels in forms is above
the fields. On many forms, labels are put to the left of the fields, creating a two-
column layout; while this looks good, it’s not the easiest layout to use.

53. Complex navigation system
Suggestion 2:
Try to group the menu items under major actions/categories like this.

54. Improper Confirmation/Alert messages
Problem:
• Alerts messages and acknowledgement messages are not being displayed properly.
• As a result the user have no clue what to do next or stuck with bad user experience.

55. Suggestion:
• Display the message
very prominently
• Tell the user whether
the action
performed is
success/fail in a
pleasing and friendly
manner.
• If it is fail, suggest
the user with
alternate options
Improper Confirmation/Alert messages
E.g. 2
E.g. 1

56. Search box without auto suggestions
Problem:
• No one is using the basic Search box (Site search) anymore.
• Now a days the user expects suggestions from the Search box, the moment
they start entering keywords.

57. Search box without auto suggestions
Suggestion:
• Implement auto complete feature in Search boxes
• Try to group suggested results by Category, if applicable
• If possible directly display the result
(for example: the actual product page related to the search keyword)

58. Navigation not supported on touch screens
Problem:
• On hovering menu actions are not handled properly.
• The user may not be able to reach the sublevels as there is no hover over option in touch
screens phones.
• Users tend to touch the menu which is actually on-click functionality.
For example: If you
access this site from a
mobile browser and
touch the menu
“Cameras” it will take to
Cameras landing page
and you don’t get a
chance to access the
submenu “Top
Categories / More
Categories” as it is
implemented in on-
hover of “Cameras”
menu.

59. Did you know?
Users Focus On Faces. On Web pages, we tend to focus on people’s faces and
eyes, which gives marketers a good technique for attracting attention.

60. …Navigation not supported on touch screens
Suggestion:
• Avoid “On Hover”
actions
• Have mobile friendly
navigation control.
Users may access
your application on
touch-screen device.

61. In-efficient web form
Problem:
• Web forms plays a vital role in most of the websites which is expected to be very efficient.
failing in it results bad user experience like:
• Difficult to fill
• Takes lot of time to
complete the form
• Session gets expired
and user has to login
again
• Errors displayed
somewhere else
which is difficult to
find
• User don’t know
what to fill/select etc..
• Improper Tab indexes
where user has to
jump here and there

62. In-efficient web form
Suggestion:
Do the validation
immediately after the
focus out and display
the error message
adjacent to the field.
• Have a help text
which gives the user
some idea about
what to enter
• In case of an error,
suggest alternate
option
• Try to have the form
layout with top down
approach instead of
left right approach
• Have proper tab
indexes

63. No “Loading” control for content heavy screens

64. No “Loading” control for content heavy screens
Suggestion 1:
• Don’t have one
common loader
for the entire
screen
• Identify the
modules with
heavy content and
implement loading
individually
• Use CSS or JS
loading

65. No “Loading” control for content heavy screens
Suggestion 2:
• Consider using
lazy image
loading for
graphically heavy
pages
• Have infinite
scroll feature for
portal site or
social networking
sites with lengthy
page and lot of
contents.

66. Did you know?
Quality Of UI Design Is An Indicator Of Credibility
Various studies have been conducted to find out just what influences people’s perception
of a website’s credibility.
One interesting finding of these studies is that users really do judge a book by its cover…
or rather, an application by its design.

67. Script errors are not handled
Problem:
• If you don’t handle the script errors, then the application is not going to load
further and will have incomplete/collapsed/broken data.

68. Script errors are not handled
Suggestion:
• Use the error console in your browser (IE/Chrome/Firefox etc.,) find, review and fix
the script errors if any.
• Test the page in major browsers and OS

69. Broken Links / no 404 page
Problem:
• If a visitor see this page, you have zero opportunity to keep that visitor engaged
with your website.
• It blames the visitor – “you typed in a bad URL”, “you were looking for
something that doesn’t exist”, “you must have made a mistake”…

70. Did you know?
Small Details Make a Huge Difference
Flow, a user-centered design firm found that by revising their error page
help text improved completed checkouts by 0.5% per month, which if
extrapolated, could mean an additional quarter of a million pounds
annually for the particular site.
A polite two-sentence message instead of a cryptic 404 error:

71. Broken Links / no 404 page
Suggestion:
• Make it obvious that the visitor is still on your site –
company logo, same theme can be used.
• Tell them what went wrong – “We couldn’t find the
page you were looking for” something like that.
Make sure this is written in language they can
understand.
• Give them some navigation options to get into other
parts of your site.
• Include a search box if possible
• Cross Selling – You can use your 404 page as an
opportunity to showcase few products, resource
downloads, etc.
• Humor – if it fits with your brand image, you can
poke a little fun.

72. No or improper breadcrumbs
Problem:
• If there is no breadcrumb in website with complex/multilevel menus, there are
high chances of user gets lost in the site.
• Breadcrumbs with improper display and links will add further confusion to the
user.

73. No or improper breadcrumbs
Suggestion:
• Place a breadcrumbs control in the top of the application just immediately below the
header part.
• Breadcrumbs trail is a navigation aid which allows users to keep track of their locations.
• Its better to link each sections to the corresponding sections.

74. Problem:
User has to wait for each image to upload and then choose the next image, which is time
consuming.
Multiple photo upload not supported

75. Multiple photo upload not supported
Suggestion:
• Have multiple fields to choose the photos/docs and have one common button
“Upload”
• Once the user reaches the last field to choose the photo/docs, add few more fields
• “Drag and Drop” functionality is good to have
• Show the progress while photos being uploaded

76. Did you know?
The Ideal Search Box Is 27-Characters Wide
A study found that the average search box is 18-characters wide. The data showed that
27% of queries were too long to fit into it. Extending the box to 27 characters would
accommodate 90% of queries.
What's the ideal search box width?

77. Overlay dialogue not closing properly
Problem:
• There is no close or cancel button placed in a light box overlay
• Forcing the visitor to read it or click it which actually irritates the visitor unless the content
is interest to him.
• Sometimes multiple light boxes are stacked which will be very annoying to the user.

78. Overlay not closed properly
Suggestion:
• Use LightBox, only if needed
• Make sure there is a Close or Cancel button placed prominently
• Clicking outside of the LightBox should also close the window
• If required implement ‘Move Window’ functionality as well.
• Keep only one LightBox/overlay at a time

79. No-Image not implemented
Problem:
• Sometimes we use placeholders to display the content to retain the layout
structure.
• When the data loads inside that placeholder dynamically and if there is no data
in the DB, then the place holder will look empty.
• The visitor may not know whether the image will be loading or not.

80. Technical Defects

81. Usage of copyrighted images taken from Google

82. Improper linkage between thumbnail and large image

83. Not validating the image that is being uploaded for
dimensions and file size
In the above scenario, the validation should be done to check the following:
• The dimension is 300 X 300
• The file size must be less than 15kb.
• The image should be in PNG, GIF or JPG format

84. Not using the lazy image loading functionality for
graphically heavy pages
• Lazy Load delays loading of images in long web pages.
• Images outside of viewport are not loaded until user scrolls to them.
• Using Lazy Load on long web pages will make the page load faster.
• By doing this, we can reduce the server loading time.
GoodBad

85. Invalid Image Path
• Make sure that the image exists in the image folder and typing the right
image path will solve the problem in most cases.
• There are two types of file paths: Relative and Absolute
Absolute
Relative
• <img src=“img/cupcake.jpg" alt=“cupcake">
• <img src=http://www.domain.com/img/cupcake.jpg alt=“cupcake.">

86. Failed to implement Sprites technique
• CSS Sprites is a method of combining multiple images used throughout your
website into one big image.
• You can then use the proper background-position CSS attribute to show the
particular image you want from your CSS Sprite using the X and Y coordinates.
• By doing this, we can reduce several http requests, hence the server response
time will be faster.

87. Smaller yet significant things
• Pressing “Enter” button after filling the form should submit the form
• Do not use multiple jQuery libraries
• Close drop-down menus and LightBoxes on Mouse-Out
• Place “Back to Top” button
• Use Captcha to make sure the forms are filled by a human
• While Copy/Pasting the code from one project to another make sure
you delete the trails

88. Tools
Contrast Ratio:
http://leaverou.github.io/contrast-ratio/#black-on-white
Sprite Generator:
http://csssprites.com/
Alternative to PhotoShop:
http://pixlr.com/
Interactive debugging in a visual environment:
http://getfirebug.com/
Font Finder:
http://chengyinliu.com/whatfont.html
Viewport Resizer:
http://lab.maltewassermann.com/viewport-resizer/
Type Tester:
http://www.typetester.org/
JPEG Optimizer:
http://www.jpegmini.com/

89. For support mail to:
UX@aspiresys.com

90. The journey has just begun…
Thank you & Bye for now!