Category Archives: Web design

What does Fitts’s law mean for web apps?

According to Fitts’s law, the time required to move a pointing device to a target is a function of the distance to the target and its size. In simpler words, the closer and larger a target, the faster it is to click on that target.

When I first heard about it, I was really fascinated by the idea, though it sounds rather obvious in hindsight. I wondered what exactly it means for web apps. (If you are new to Fitts’s law, try this interactive demo).

Prime Pixels Not Applicable To Web Apps

One of the inferences of Fitts’s law is that the easiest areas to click on a screen are the corners and edges of the screen, as you can simply throw your cursor in that direction without overshooting.

Corners and edges are prime screen real estate. (Diagrams: smashingmagazine)

Corners and edges are prime screen real estate. (Diagrams: Smashing Magazine)

But, unfortunately this cannot be applied to web apps, as the edges of the web browser are not always the same as the screen’s edges (unless the app is in full-screen mode).

Still, Closer Is Better

Still, there are other things in the UX that could be improved using Fitts’s law. For instance, modals (lightboxes, overlays or whatever) have been a common way of getting user inputs in web apps, probably borrowed from desktop apps. Though they are helpful when the action needs complete focus without distracted by other elements on the page, it’s an overkill for most lightweight actions.

Inline-editing

For example, until a few months back, if you tried to rename a Google Doc while editing it, it would open a new modal box.

In older Google Docs, you have to move your mouse so fart to complete the rename action.

In older Google Docs, you have to move your mouse so far to complete the rename action.

As you can see, this is not optimal, as you have to move your mouse from where you clicked on the name to the OK button in the modal (not many people use Keyboard shortcuts, even simple ones like hitting Enter to submit a form).

Thankfully Google has changed this behavior recently and now you can do the renaming right there, in place. This obviously feels much more lightweight and takes less effort from the user — no mouse movement and no extra click to save the changes.

In-place renaming in Google Docs

Dropdowns/popovers

Another way of avoiding modals — and hence the long mouse movements — is to use simpler UI elements that appear right next to the element that triggered the action.

In Pocket, when you try to delete an article, the confirmation dialog is shown as a lightweight popover that appears right below the delete icon.

Pocket app uses a popover to confirm the delete action, which is much easier to target.

Pocket app uses a popover to confirm the delete action, which is much easier to target.

To understand the benefit, you can compare this against the “Edit tags” UI of the same app. When you click on the tag icon, a modal box appears in the middle of the screen, with just an input box and a submit button. For such a simple form, a modal is an overkill.

Pocket app uses a modal for editing tags, which makes your mouse cursor travel longer than required.

Pocket app uses a modal for editing tags, which makes your mouse cursor travel longer than required.

You could use a popover very similar to Pocket‘s delete confirmation to show this form. Recruiterbox uses a popover-like UI for simple forms, where modal would be an overkill.

Recruiterbox popover form

Final thoughts

I’m seeing more and more places where modals are being replaced with lightweight and closer UIs. However, the legacy probably left by jQueryUI’s Dialogs and carried on by other libraries like Bootstrap is still haunting us in many places.

Even at Recruiterbox, we have been using modals extensively. Only recently did we decide to avoid modals except for a few actions that require richer forms. Hoping to see more things move in this direction.

References

Redesign website without affecting SEO

At Recruiterbox, one of the things we wanted to do for a long time was to redesign the front website. The site was done in 2012, but within a year or so we realized the design didn’t give the feel of a new-age company (*cough* flat UI *cough*). However, we were busy building new features for the app, and couldn’t get enough time to work on the redesign.

Finally, last year, Girish made an attempt to do the redesign from scratch. All of us were happy with the new design. The work was almost complete, and was ready to be launched in a few days. However, one thing we were very well aware from the beginning was that SEO would take a hit from the revamp. (We had been scoring good on SEO. recruiterbox.com appears in the first page of results for most of the targeted keywords, especially in the US, which is our primary market). But, towards the completion, we realized that the risk would be too big – SEO has been the biggest channel for sign ups consistently.

So we parked the idea for a while, thinking of revisiting it later. And that revisiting didn’t happen until last month. By then we were sure we didn’t want to disrupt the SEO abruptly. So we came up with a plan to go about it one step at a time, keeping a close eye on analytics for every step we take. This post explains the process step-by-step,

First of all, this is what we wanted to achieve with the redesign:

  • Good typography
  • Responsive design
  • Flat UI
  • Brighter colors

Step 1: Fix typography

This must be pretty straight forward, at least we thought so. We were clear about the choice of font. Proxima Nova is what we have been using for the app, and we wanted to keep it consistent. Undoubtedly, it’s one of the most elegant fonts.

So we just had to get the font from Typekit, include it in the base template and change the font-family in CSS. Simple! But once the changes were deployed, we were shocked to see the Google Pagespeed score drop drastically. One would expect font services like Typekit to serve web fonts as optimally as possible. But it doesn’t seem to come anywhere close to being optimal.

We found a hack to work around this, but we put it in the task list, as we didn’t want to get stuck in rabbit holes slowing down the redesign.

Step 2: Upgrade to Bootstrap 3

We were still using Bootstrap v2.x, so our first step was to upgrade to 3.0, which is responsive by its nature. Thankfully Bootstrap has a nice guide for the upgrade. We hadn’t tweaked the older version too much, so this was simpler than we expected. And this suddenly made almost everything adapt nicely to mobile, except for few adjustments.

Another thing came for free with Bootstrap 3 – flat UI.

Step 3: Change color palette

Many people had told us that the website looked little dull, which was true. The solution clearly lies in the colors. We wanted to make the front site look little more vibrant, with more saturated and contrasting colors.

So we went page after page and changed the styles, also making sure most pages have a “hero unit”.

Results

recruiterbox-old-homepage

Recruiterbox homepage before the redesign

Recruiterbox homepage screenshot

The new homepage

As planned, we were monitoring Google Analytics for any noticeable changes in traffic. Other than the usual drop during the holiday season in US, there didn’t seem to be any negative change. In fact, conversion rate started increasing slowly. One interesting thing was that the mobile traffic increased gradually but there was no significant sign up rate in mobile. On the other hand, the sign up rate in desktop had increased considerably. Probably people go back to their desktop to signup after checking out the website in mobile? This was the only likely explanation we could come up with. Also it made sense, Recruiterbox being a B2B product.

Now, after a month since the redesign has been out, with few other UX optimizations (will write about it soon), the signup rate has increased by a whopping 70%!

This post on recruiterbox tech blog:
http://inside.recruiterbox.com/improving-recruiterboxcom-for-humans-without/

லெஸ் நடைதாள் மொழி

CSS எனப்படும் விழுதொடர் நடைதாள் மொழி (Cascading Style Sheets) பற்றிப் பலரும் அறிந்திருக்க வாய்ப்பு உண்டு. இணையத்தின் ஆஸ்தானக் குறியீட்டு மொழியாக மீயுரைக் குறியீட்டு மொழி (HTML) விளங்குவதைப் போல, இணையத்தின் ஆஸ்தான ஒப்பனையாளர் நமது CSS தான். மிகவும் எளிமையான மொழிதான் என்றாலும், தனக்கென பல வறையரைகளைக் கொண்டது CSS. எடுத்துக்காட்டாக, இம்மொழியில் மாறிகள் (variables) இல்லை. இணையதளம் பெரிதாக வளரும்போது CSS நிரல்களைப் பராமரிப்பது கடினமாகிவிடலாம். இதுபோன்ற பல குறைபாடுகளைப் போக்கி, அதே நேரம் CSS-ன் எளிமையையும் பாதுகாத்து, இணைய வடிவமைப்பாளர்களின் பணியை எளிதாக்குகிறது  LESS என்னும் நடைதாள் மொழி.

இது CSS-ற்கு பல புதிய வசதிகளைச் சேர்க்கும் ஒரு மேம்பாடுதானே அன்றி, CSS-ற்கான மாற்றுமொழி அல்ல. அதாவது, இதுவரை நீங்கள் எழுதிவந்த CSS எதையும் மாற்றி எழுத வேண்டிய அவசியம் இல்லை. லெஸ் பயன்படுத்த ஒரே ஒரு ஜாவாஸ்க்ரிப்ட் கோப்புதான் தேவை. அதை இங்கே பெற்றுக் கொள்ளலாம்.

இப்போது, கீழ்க்காணும் இரண்டு வரிகளை உங்கள் வலைப்பக்கத்தின் <head>-ல் சேர்க்கவும்:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

இங்கு <link>-ன் rel பண்பு கவனிக்கத்தக்கது. CSS கோப்புகளை இணைப்பதுபோல் அல்லாமல், லெஸ் கோப்பினை இணைக்கும்போது, இறுதியில் /less சேர்க்கவேண்டியது அவசியம். மேலும், லெஸ் கோப்புகளுக்கு அடுத்ததாகவே less.js கோப்பை இணைக்க வேண்டும்.

இப்போது, less.js -ல் உள்ள நிரல் இணைக்கப்பட்ட லெஸ் கோப்புகளைப் CSS-ஆக மாற்றி உலாவியிடம் கொடுக்கும், உலாவி எப்போதும்போல CSS-ஐ கையாளும். மாறாக, வழங்கியிலேயே லெஸ்ஸை CSS-ஆக மாற்றியும் அனுப்பலாம். இது வலை உலாவியின் பழுவைக் குறைப்பதோடு, ஜாவாஸ்க்ரிப்ட் முடக்கப்பட்டிருக்கும் சூழலிலும் வேலை செய்யும். வழங்கியில் லெஸ் நிறுவ NPM (Node Package Manager) தேவை.

மாறிகள் (Variables)

வலைத்களங்களில் color palette எனப்படும் நிறத்தட்டுகள் பயன்படுத்தப்படுவது (ஒன்றுடன் மற்றொன்று இயைந்து அழகாய்த் தோன்றக்கூடிய நிறங்களைத் தேர்ந்தெடுத்து, அந்தக் குறிப்பிட்ட சில நிறங்களை மட்டுமே பயன்படுத்துவது) வழக்கம். இத்தகைய சூழல்களில் அந்த நிறங்களை மாறிகளாகச் சேமித்துக் கொள்வது மிகவும் எளிமையாக இருக்கும். இல்லையெனில் ஒவ்வொரு முறை நிறங்களைப் பயன்படுத்தும்போதும், அவற்றிற்கான அறுபதின்ம (hexadecimal) குறியீடுகளை நினைவில் வைத்துக் கொள்ளவோ காபி-பேஸ்ட் செய்யவோ வேண்டும்.

இதேபோல் வலைப்பக்கத்தின் வடிவமைப்பிலும் குறிப்பிட்ட நீள அகலங்களைப் பயன்படுத்துவது முறை (grids).

எடுத்துக்காட்டு

@blue:   #049cdb;
@green: #46a546;
@red:    #9d261d;

@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;

மிக்ஸின்கள் (Mixins)

ஒரு ruleset-ன் விதிகளை இன்னொரு ruleset-ல் பயன்படுத்த வழிசெய்கிறது மிக்ஸின்கள்.

எடுத்துக்காட்டு

.bordered {
  border-top: 1px solid black;
  border-botton: 1px solid gray;
}

.someClass {
  .bordered;
  /* Some other style */
}

மிக்ஸின்களைப் பிறமொழிகளில் உள்ள function-களைப் போலவும் பயன்படுத்தலாம். திரும்பத் திரும்பச் செய்யவேண்டிய ஒரே மாதிரியான வேலைகளை இதன்மூலம் எளிதாகச் செய்யலாம்.

எடுத்துக்காட்டு

.border-radius(@radus: 5px) {
  -webkit-border-radius: @radius;
   -khtml-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.someClass {
  .border-radius(6px);
  /* Some other style */
}

உள்ளடக்கபட்ட விதிகள் (Nested Rules)

ஒரு CSS-selector-ற்கான விதிகளை எழுதிய பிறகு, அதற்குள் இருக்கும் மற்ற selector-களுக்கான விதிகளைக் குறிப்பிட CSS-ல் கீழ்க்கண்டவாறு எழுதுவோம்.

#header {
  ...
}

#header .logo {
  ...
}

இதை லெஸ்ஸில் இன்னும் எளிதாக எழுதலாம்.

#header {
  ...
  .logo {
    ...
  }
}

செயல்பாடுகள் (Operations)

எண்களை மட்டுமல்லாமல் நிறங்களையும் நீள அகலங்களையும் (1px, 2cm போன்றவை) கூட்டல், கழித்தல், பெருக்கல், வகுத்தல் என அனைத்தும் செய்ய முடியும்.

எடுத்துக்காட்டு

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;

@base_color: #550;
@dark_color: @base_color + #333;

நிறச் செயல்பாடுகள்

நிறங்களை ஒன்றுடன் ஒன்று கூட்டுவதும் கழிப்பதும் மட்டுமில்லாமல், லெஸ் நிறங்களுக்கான கீழ்க்காணும் பயனுள்ள கட்டளைகளையும் நமக்குத் தருகிறது.

lighten(@color, 10%); // a color 10% *lighter* than @color
darken(@color, 10%); // a color 10% *darker* than @color
saturate(@color, 10%); // a color 10% *more* saturated than @color
desaturate(@color, 10%); // a color 10% *less* saturated than @color
fadein(@color, 10%); // a color 10% *less* transparent than @color
fadeout(@color, 10%); // a color 10% *more* transparent than @color
fade(@color, 50%); // @color with 50% transparency
spin(@color, 10); // a color with a 10 degree larger hue than @color
spin(@color, -10); // a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // a mix of @color1 and @color2

ஜாவாஸ்க்ரிப்ட் கட்டளைகள்

ஆம், CSS-க்குள் ஜாவாஸ்க்ரிப்ட் பயன்படுத்த முடியும்.

எடுத்துக்காட்டு

@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */

@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */

@height = `document.body.clientHeight`;

இன்னும் பல…

இன்னும் பல வசதிகளைத் தருகிறது லெஸ். இதைவிட்டு இன்னும் வெறும் CSS-ஐ பயன்படுத்திக்கொண்டிருந்தால் எவ்வளவு நேரம் வீணாகும் என்பதை யோசியுங்கள். LESS-ஐ கொண்டு உருவாக்கபட்ட படைப்புகளுள் குறிப்பிடத்தக்கது ட்விட்டர் உருவாக்கிய பூட்ஸ்ட்ராப். அதனைப் பயன்படுத்திப் பாருங்கள், லெஸ்ஸின் ஆற்றல் புரியும்.

முக்கியமாக, லெஸ் ஒரு கட்டற்ற மென்பொருள் – அப்பச்சே உரிமத்தோடு வழங்கப்படுகிறது.

வெளி இணைப்புகள்: