I started a new gig a couple weeks ago, getting to know clients, sites, applications, and had some random thoughts on UI/UX…
Whenever one starts a new job, among the first tasks is getting to know their internal applications, and their client properties. I am often surprised by some of the things I see that affects user interface and user experience (UI/UX). They are different things.
While this is my personal opinion, I see user interface as a simple single page “how it looks and works”. User experience I see as a process, from page to page, being efficient and effective. People can argue this point until the end of time, but that is how I look at it.
User experience is pretty easy going through content pages. It involves good content organization, logical menu progression, good blog labelling, etc. Not that hard.
What does tend to get more difficult is content management, data display and form use.
Wise Use of Form Fields
The biggest mistake I saw on a recent project was every text based form field was full width of the web page. So even number and date fields were 800 pixels wide, even though dates are 10 characters, and integers often similar.
The biggest problem with that is when using HTML5 and you use a type=”date” or type=”number” it gets cumbersome. In the case of a date, if you want to use the HTML5 calendar, the user has to go 800 pixels to the right, click the calendar icon, then 800 pixels to the left to use the calendar.
Given that dates are 10 characters long, just make the field a couple hundred pixels wide. Doing that would be a nice quick back and forth where the calendar drops down right beneath the cursor after the calendar icon is clicked. Quick and easy.
Same with number fields, if you like to use the up and down arrows. A whole lot of back and forth, the number appears on the left, the up and down on the right. Not friendly.
With modern CSS (not even modern, it’s quite dated now) simply use input[type=date] {} to define field styles for only dates, input[type=number] for number fields. So it can be universal around your site.
Pay attention to data types, if a datatype is 16 characters, why have a, 800 pixel wide field?
Datagrid Displays
When you display the data in a datagrid, only display relevant columns, not everything. Keep it concise, and easy to scroll and find what you need. View, edit and delete buttons obvious, so users can get where they want quickly.
Adding sortability and search by column is helpful as well, and depending on your cleint side technology can be very easy. Most libraries, such as jQuery, among many others, have very simple plugins to make it easy. For jQuery I use DataTables, and it works great.
Focus on the User with good UI/UX!
Some of these seemingly small changes can very much increase UI/UX acceptance on your website, and users will have a more pleasant experience while having far less frustration.
Happy users equal happy site!