Improving RankQuest.com - HTML Validator Tool's UI
Improving RankQuest.com - HTML Validator tool UI
Following my previous post about Improving User Experience in 2 hours, here is another UI which I designed for Rankquest.com’s HTML Validator tool. RankQuest is a great site for SEO Techies. They offer good articles, and some cool tools that are really useful for website managers and developers.
HTML Validator
HTML Validator is one such simple tool, which uses HTML Tidy in the back-end. Their front-end UI is pretty basic and the results closely follow the Tidy’s result pattern, which is difficult to read and grasp the overall result. My UI suggests a simple dashboard which says whether the URL given is OK or BAD using a single icon metaphor. And within a single line it lists the number of errors and warnings.
Below the dashboard, there comes the RankQuest HTML Scanner. This is my idea of showing “where the error is” instead of a lenghty “Line 1 Coloumn 32: erroor”. This precisely gives the visual location of where the error is. A user who is using dreamweaver (code mode) or simple HTML editor can visually identify the location of the error or warning. This UI shows the code in error with a colored background. When the user hovers his mouse over the colored code, a pop-up (DIV layer) opens up with the information using the “Line X Coloumn Y :[ Error].. [Error Description]” pattern. In addition, the default HTML Tidy style results is shown below too. Users who feel comfortable with TIDY’s style can still access the result report. To save the result for future reference or editing, the UI offers a link to download the report as a file.
Conclusion:
Proper white-spacing and adding visual clarity could increase the user experience of any UI. This is one such attempt to validate this point. 
Comments