r0ash

[r0ash]

6 Ways To Improve Flat Forms Usability

HTML Form is a conversation among user and website, to build relationship with the help of appearance that ultimately increases the form submission rate without confusing users. While we see some websites that are aesthetically good but fail to build that relationship, specifically the Flat design websites, for instance have a look at CSSWinner.com, every second website lack usability in forms.

Flat design is not bad itself (nor does any other trend), rather it looks more effective as focus is over content with the help of color scheme, space, typefaces, rich user experience etc, but sometime creativity dominates the usability in Forms. There are 6 basic ways to make your Flat Forms friendly for your users.

Avoid confusions:

A common issue with flat designs is to place labels inside element, that disappears when user starts typing, have a look at following form and guess which field is causing the validation error; 

Figure 1: Missing labels with generic validation message, adds confusion

Were you able to identify which input has caused the validation error?

Avoid vertical length:

Another common issue is displaying all the validation messages at once on top of the form, it will also increase the vertical length. EyeTracking tests recommend displaying validation message close to input field.

Figure 2: Form displaying all validation errors on top of the form

Simplicity with usability:

User experience is a journey not a moment. Designing & developing software takes lot of effort & time, we try our level best to provide pleasant experience to our users at every step, but it seems quite unjustifiable to prompt user with a popup (that requires action too) for a simple task of providing information as to what happened when he/she clicked that form submit button;

Figure 3: Validation message as javascript alert

These and other common issues can be fixed by applying proven usability practices with a little or no tweak.

Usability in Flat Forms:

The five components of a form (label, element, validation message, action, help/hint) if use with all the usability recommendations and creative design, could drastically enhance user experience.

1) Label Placement

There is a debate among usability experts regarding the placement of label inline or top of element. To me inline labels saves space and form do not grow vertically, animating label's move to top or bottom (or anywhere you like) will keep the label there even if user provided some wrong input.

Figure 4: Interactive Inline Labels are usable

2) Element Styling

HTML Form's default element styling will not work here. We need intelligent & creative ways to render input. Search form at LiveLovely.com has no labels for "Pets Allowed" and "Listing having images" elements, yet they are conveying the purpose.

Figure 5: Smart & Usable Form Elements

3) Validation Messages:

Whether you do inline validations or upon submit, they must be styled with usability & user experience in mind. The placement should be near the element, so that user would not need to scroll away from focused field to know the reason of failure. There seems one of two approaches better, either display validation message near the element to show some tooltip.

Figure 6: Validation message at the bottom of element

4) Actions

The form's call to action is the submit button. Instead of displaying primary action as link, its good practice to make it button instead. Also element size long submit buttons are less usable than, comparatively shorter buttons. Have a look of two versions of a same form and decide for yourself, which seems better.

Figure 7: Comparison of Primary Actions

5) Help

Usually no hint or help is required for common (and small) forms like login, signup, contact, newsletter subscription etc, but if it is complex and long, some elements might need little more explanation. On demand help text (hovering over help icon or when element gets focus) as a tooltip, is good as it wont require fixed place for visibility. Alternatively, element label could be a sentence (if not hiding upon key down event) as help or hint. Third possible way is to have it as lighter text near element.

6) Interactions

Simple interactions with a defined purpose will help you and your users engaged. The interaction design is a fashion, choose one that suits the purpose of your form. SixUX.com has bunch of interactivity examples in chronological order.

#Flat Design #Flat Forms #Forms Usability #Forms User Experience

[r0ash]

Being author myself, I've met variety of buyers, mostly good, very few that leave an emotional-impact.

Being a developer myself like DeluxeThemes, I love to answer every single support query, my take on this is that, I like when people use my creations, some sort of happiness.

But I've to admit, what DeluxeThemes is doing is beyond norm. I've got a lot of #respect for him, and wish him all the best in his endeavours. Offering fanatic support is one thing, never leaving any support-query is just awesome, but making every other feature request part of your product, withdrawing addons just for the sake of relieving some clients is nothing other than true Care.

P.S: I am in no way affiliated with DeluxeThemes, just another admirer of his attitude towards his work.

[r0ash]

reForm v1.0.3 is released

reForm v1.0.3 is out!

We have fixed the repeated bug with output buffering in all of the parts of the package.

Due to varying configurations of hosts, it was working fine at our end during tests, but this same issue is reported by two customers from Europe. The good thing is that, its now fixed.

#contact form #ajax contact form #reform #reform v1.0.3

[r0ash]

reForm v1.0.2 is released

We have released the version 1.0.2, waiting for approval from Envato.

The change log is as follows;

1) Output buffering bug fix

2) New function added to retrieve multiple-value form fields, for instance from checkboxes.

The documentation is also updated.

#reform release #announcement

[r0ash]

Vertical Navigation Menu (jQuery)

Vertical Navigation Menu (jQuery) is a cool design provided by PremiumPixels for free. The jQuery accordion script using same PSD is developed by r0ash.com and available for free for commercial or personal use. Checkout demo here.

We have tested in Firefox 8, IE 8, Safari 5, Chrome 15 & Opera 11 with 1280x800 screen resolution on Windows XP SP3.

For comments, queries and compliments drop us an email over [email protected].

Enjoy!

#jquery vertical menu #jquery menu #jquery accordian menu

[r0ash]

reForm - The Ajax Contact+ Form

reForm is the Ajax Contact Form that can be integrated with any website very easily and could be configured in minutes, without modifying any line in the actual source code. Plenty of pre-defined examples help you integrate the script the way you want it, whether database storage, csv export or submission to Google Spreadsheet. You can enable/disable any feature like IP inclusion, auto-responder etc in configuration files. Extending the reForm could be done via available plugin files, extend reform without changing core files!

Checkout our video preview

UTF 8 support

3 Themes

5 Layouts

CSV Export

Google Spreadsheet integration

Database storage

Restrict IP Address

Block words or phrases

Auto responder

Include IP Address in Email of the person submitting form

Send email as plain text or html, customize the look and feel of email

Send via SMTP or sendmail

Extensive Documentation, includes snapshots and videos

reCaptcha & reForm Captcha support

With reForm captcha, display UTF-8 text in the image and take UTF-8 input or display image of cat or dogs and let user identify the animal (similar to ASIRRA)

Multi-lingual: RTL support for languages like Hebrew, Farsi and Arabic

Send email to multiple-recipients based upon the input (like send [email protected] when Support is selected from dropdown)

Filter inputs

Validate data before handling

Multi-Language support (with RTL Layout)

Default Theme (contemporary & modern design)

Dark Theme

Light Theme

#reform #ajax form #contact form #ajax contact form

[r0ash]

Challenger is simple, easy to use and secure captcha verification handling script. It can serve images containing text and/or mathematical equation and/or UTF -8 encoded string and/or photo. It works with any PHP version and is cross-browser compatible. The package comes with multiple example source code and a cool modern form.

#captcha #recaptcha #asirra #form #secure #human verification