Jitbit Blog about Customer Support

6 Quick Fixes to Improve a Legacy Web App's UX

Mar 24 2015 :: by Alex

Every web-developer has to work with really old web-applications and sites sometimes. Built in the "pre-HTML5" era on top of some old framework using some odd tools and everyone is too scared or too lazy to touch it... Here are some quick tips that will help you make those monsters a little bit more friendly to your users in less than an hour.

HTML5 "input types"

<input type="text"> was doing a decent job for decades, but now we have all sorts of inputs, "number" and "email" being the most beneficial ones. Here's the full list:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Some of them are even partially supported in IE. And even if you're using some really ancient browser (say, an IE7 on a Win XP) - no worries - these new input types will automatically fall back to a simple "type=text". You can also optionally use "Modernizr" JavaScript (or similar) to support those old beasts.

Labels "for" checkboxes and radios

Always use a "for" label next to a checkbox or a radiobutton, so the user can click the text to change the "checked" state, not the little box. <input type="checkbox" id="cb1"> <label for="cb1"> is the best practice. Run a quick search through your project for checkboxes and radios and add "for" labels everywhere.

In fact, the "for" attribute will work with other inputs as well (i.e. textboxes, selectors and textareas) but checkboxes are the ones that need it the most, since they're harder to point/click, especially on a touch-screen device.

Input type file - "multiple"

I was surprised how many developers are unaware of this great feature. Using the new "multiple" attribute allows the user select multiple files in the file-upload input. <input type="file" multiple="multiple">. Supported by IE10 and later.

Use font-based icons

These days when everyone carries a retina display in a pocket, we should prefer font-icons over the image-based ones. Font awesome is just one example.

Awesome bonus: web-browsers send a separate http-request for every image on the page (that is the reason why people have invented "sprites"), but with fonts - all your icons are downloaded with a single http-response. Cool.

Also, remember you can always use unicode symbols for many things.

Autofocus on the first form input

A very simple hack to make your users life much easier: <input type="text" autofocus>. Supported by all major browsers (IE10+, FF35+, Chrome 40+). You can always fall back to a javascript fix:

<script type="text/javascript">
window.onload = document.getElementById('myfield').focus; 
</script>

Also, styling a focused input is a great practice. You could add a shadow via CSS for example: input:focus { box-shadow: box-shadow: 0 0 11px #000; }

Input text "placeholder"

Also, a technique that is often overlooked. Always add "placeholders" to your inputs


'6 Quick Fixes to Improve a Legacy Web App's UX' was written by Alex by Alex. CEO, founder


comments

Brought to you by

Help desk software

Jitbit Helpdesk