If your website has started looking older as compared to its competitors then it’s perfect time to make necessary tweaks to its design. One of the most important factors for any website to succeed is its user interface. Normal visitors care least about the technologies involved when using a website. An old looking and boring website will definitely lose a good amount of visitors.
Redesigning the website’s user interface may be troublesome and time consuming for many companies. There are also companies who don’t care much about redesigning because they are happy with the loyal returning visitors they already have. This is obviously not good for the website in long run. These visitors will soon find better looking websites that present themselves more attractively and usable then yours.
In this article, I am going to list down some of the important but easy tweaks that can improve the current user experience of your older website.
Remove blocking alert and confirm boxes
If your website still uses age old alerts and confirm boxes then it’s definitely time to upgrade. These alert windows prevent users from navigating to the other tabs or minimizing the window. They are frustrating and hence create bad user experience.
Use CSS3 based dialog light boxes or modals for such cases. They just block the usage of your own website instead of the whole window. Since they are HTML based dialogs you can apply fancy styles to suit your website’s theme.
tympanus.net has provided a great list of beautiful modal boxes.
Here’s another great resource by CSS-tricks: Receding Background Modal Boxes
Beautiful progress bars
Using beautiful CSS progress bars can also enhance the overall design of a website. If you allow users to upload images or other files, then using a beautiful progress bar can greatly enhance the usability of your application.
It’s a bad experience when websites reload while uploading a file. In this generation of internet, use of Ajax based uploader should be highly encouraged.
Bootstrap 3 provides some cool progress bars that can be directly implemented by writing few lines of HTML and JS.
Don’t show form defaults
Exposing bare form without any CSS can result in extremely poor response from your audience. The problem with these forms are they look traditional, spammy and lengthy.
One of the best inspirations for creating a minimalistic and great form is Facebook’s status box. If you look carefully, there are 4 different (or even more) form controls in Facebook’s status box. It’s so beautifully presented that users find it pleasing to use.
Most of the CSS frameworks like Bootstrap 3 and Foundation 5 provide beautiful ready to use form controls.
Use Cleaner font
If your website provides more textual content, then go for a clean and modern font. Never use default serif, sans serif, handwriting and monospace fonts. They have become outdated and stale. Try their new variants that are freely available from Google Fonts.
Some of my favorite fonts are Helvetica Neue, Roboto and Raleway.
Spacious content
Space is the new trick for building modern websites. Creating a spacious website will make things look simpler and cleaner. Whether you are trying to sell a product or creating a simple blog, always try to give a good amount of padding or margin around website elements.
Get inspired from Apple’s website. It contains a lot of space.
Use Attractive action buttons
Never display simple anchor links for performing important actions. Try to style them like attractive buttons by applying CSS. There are plenty of open source libraries for creating beautiful CSS buttons.
Buttons is one of the newest and best CSS libraries for elegant and clean buttons.
Leave NO un-styled links
Default links have become outdated. They will not match with the overall theme of your website. Try to apply some styles and be innovative in this field.
One of the best practices is to create a universal color theme for your website. Create a set of colors to be used in your website and decide which color should represent links. This will give consistency to your website and users will be able to distinguish links from normal text properly.
Say NO to Standard CSS colors
CSS comes with 17 standard color names like red, green, orange, blue, gray, purple, etc. Say no to all of them. Standard colors have also become outdated. They have been used so much that they will make your website look outdated instantly.
Use free online softwares like Adobe Color CSS to select a good color combination for your website.
Use font icons
Icons are a new way to express words in modern web. They instantly communicate the message to the readers. Using a font icon will definitely upgrade older websites.
There are plenty of open source font icons that you can use. Font Awesome, Glyphicons (Free version) and Foundation Icons are some of my favorites.
Don’t use default social media buttons
One of the biggest mistakes that web developers do is inserting the social media buttons directly into their websites. Your readers might have seen the same set of buttons in thousands of different websites. You should definitely try to do something new by creating your own social share plugins.
Font icons can be of great help in this case. Almost all the free font icons come with social media icons. You can use them to create beautiful social share plugins.
Ridiculously Responsive Social Sharing Buttons is one of the great free plugins you can use to make custom social sharing plugin.
Conclusion
There is no big deal in creating a modern website. The mantra is simple: keep it clean and spacious. Usage of better colors also plays an important role in better user experiences.
