tag:blogger.com,1999:blog-63381894941313203612024-02-20T10:30:37.974+01:00How (not) to Lose a CustomerI just want people not to prevent me from using their services...Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-6338189494131320361.post-32691124400487777732012-02-22T11:13:00.002+01:002012-02-22T11:15:36.969+01:00Avoid using modal windows on websitesAn inevitable part of each sign up form is its username or e-mail address field. The rest is optional (even the password field). Hence, it is necessary to inform the user somehow that they are <b>required </b>to provide the username or e-mail address. What's more, you should notify them when they leave the required field empty. How to do it? As always, there is a good and bad way.<br />
<br />
I just encountered the ugly one.<br />
<br />
<a href="https://accounts.edubrite.com/oltpublish/site/signup.do?product=CBT" target="_blank">EduBrite signup form</a> displays a JavaScript alert which is a modal window that prevents user to interact with the rest of a website. It shows up when the username field lacks focus. As a result user has to click OK button and is forced to fill in the missing value before submitting the form. Sounds innocent?<br />
<br />
The problem is that the modal message pops up also when the user tries to click a menu button (e.g. <i>Features, Pricing</i>), select some text or start filling in the form from the other field. Not annoying enough? Let's imagine it shows up even when trying to click the browser's address field! A total disaster...<br />
<br />
The problem is that forms on websites are not the only part of the user interface inside the browser window. In desktop applications a form is usually a part of some workflow which, since started, has to be finished or canceled. In this context leaving required value empty means an error indeed. The user can either fill in the missing field or cancel the workflow (i.e. form filling). On a website, however, there are much more possible interactions and filling in the form is only one of them. The user may want e.g. just to browse the site and may be not interested in the form at all. The form shouldn't interfere with the navigation, especially out of the website context (i.e. prevent the user from typing in web browser's address bar or clicking web browser's buttons).<br />
<br />
So, how to do it better?<br />
<br />
<b>Advice</b><b>:</b> Well, just avoid showing up modal windows on websites. Instead, <b>show the information next to (i.e. to the right of or below) the problematic field </b>in form of noticeable text, optionally put inside the box. You can use colors and formatting to draw the user's attention.<br />
<br />
<i>Observed at: <a href="https://accounts.edubrite.com/oltpublish/site/signup.do?product=CBT" target="_blank">EduBrite signup form</a></i>Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.com0tag:blogger.com,1999:blog-6338189494131320361.post-23508376319761066582012-01-12T13:53:00.000+01:002012-01-12T13:53:59.943+01:00Leave login forms unscripted<span style="font-family: inherit;">Password managers have become an integral part of today's web browsers. They are able to determine whether the form is a login form and fill it out accordingly. However, some <b>ugly JavaScript can confuse them </b>and interfere with their functionality, thus breaking it.</span><br />
<span style="font-family: inherit;"><br /></span><br />
In fact, I found two sites where I was unable to use password manager built in my Opera web browser because it was not recognizing login or password field properly due to underlying JS hocus-pocus. Firefox and Google Chrome did not even propose password saving at all. What is more, such complication may also make it impossible to submit the form using the <i>enter</i> key and hence require user to explicitly click on the submit button.<br />
<b><br /></b><br />
<b>Advice: </b>Do not try to be smarter than the already existing solutions by reinventing functionality of the login forms. Or at least if you have a <b>very good</b> reason to do this make sure that you don't break those solutions (including password managers).<br />
<i><br /></i><br />
<i>Observed at: </i><a href="https://na17.pl:8443/login.php3" target="_blank">Parallels Plesk Control Panel at netarteria.pl</a> and website of my company's business partner.<b><br /></b>Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.com0tag:blogger.com,1999:blog-6338189494131320361.post-11573314566829619802011-10-14T09:47:00.002+02:002011-10-17T09:20:18.896+02:00Use only common fonts (or embed non-standard ones)My insurance company asked me to fill out an application for account activation due to the recent functionality expansion. All I had to do was download the generated PDF document, print it out, sign it and send to them. Seemed a piece of cake. Not this time. When I tried to open the document I encountered an error saying that <i>Arial Unicode MS</i> font could not be found in the system. I thought that I would find it on Windows (I use Linux). Unfortunately, it quickly turned out that the font is added to your system when you install MS Office suite (versions >= 2007)! I worked around the problem but then the next error informed me about absence of <i>Microsoft Sans Serif</i> font in my system...<br />
<br />
Two things I have to complain about. First, assuming that <b>every customer uses Windows</b> and, what's more, <b>every customer has MS Office installed </b>is <b>ridiculous</b>.<br />
<br />
Second, if the document I'm trying to open requires some fonts not present in my system I would like to be informed about <b>all</b> of them <b>at once</b>. I don't like installing one font and then checking again whether the document opens at last, repeating the process several times - it's irritating.<br />
<br />
<b>Advice: </b>When creating a content that is meant to be read by the customers use only <a href="http://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts">common fonts</a> or, better, <a href="http://en.wikipedia.org/wiki/Web_typography#Generic_font_families">generic font families</a>. If you still want to use a non-standard font you have to embed it in the document (both <a href="http://www.prepressure.com/pdf/basics/fonts">PDF</a> and <a href="http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp">CSS3</a> support font embedding).<br />
<br />
<i>Observed at: <a href="https://mojacompensa.pl/">mojacompensa.pl</a></i><br />
<br />
UPDATE:<br />
<br />
Today I received an e-mail from <i><a href="https://mojacompensa.pl/">mojacompensa.pl</a></i> (translated from Polish):<br />
<i>Dear Sir,</i><br />
<i>Thank you for your observation, we are investigating the problem and we will contact when it is resolved.</i><br />
<i>Meanwhile I am sending you an application</i><i> for your account activation attached.</i><br />
<i>After signing please send it back to the Insurance Company.</i><br />
<i>Yours faithfully,</i><br />
<i>B.S.</i><br />
<br />
As you could expect, the attached document suffers from the same problem of unavailable fonts. I wonder if those people feel that they have really helped...Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.com0tag:blogger.com,1999:blog-6338189494131320361.post-57152314987583242932011-08-20T13:39:00.002+02:002011-08-20T14:51:24.051+02:00Do not limit password lengthI tried to fill the registration form with my login and password. After five attempts, each <b>refused</b> with message <i>password too short or too long</i> my frustration hit a limit.<br />
<br />
First, I would like to know whether you claim my password as <i>too short</i> <b>or</b> <i>too long</i>.<br />
<br />
Second, what's the point in limiting password length if it's <a href="http://en.wikipedia.org/wiki/Cryptographic_hash_function">hash</a> has a <b>fixed size</b>, independent on password length? Or maybe you don't hash the passwords? Ekhm...<br />
<br />
<b>Advice:</b> Do not put unreasonable constraints on user password. Simplifying password reduces safety and, hence, your credibility.<br />
<br />
<i>Observed at: <a href="https://www.rockserwis.pl/serwis.checkout?l=1&form=0">www.rockserwis.pl</a></i>Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.com0tag:blogger.com,1999:blog-6338189494131320361.post-11666931461245767312011-08-20T12:10:00.001+02:002011-08-20T12:29:19.549+02:00Do not send passwords via e-mailSometimes after successful registration I receive an <b>unencrypted e-mail</b> that contain my login and <b>my password in plain text</b>. What's the point in securing the registration form if, a moment later, the <b>credentials are being exposed </b>badly, potentially giving access to the account?<br />
<br />
What's more, if someone unluckily broke into my e-mail account he would get <b>an extra gift - passwords </b>to my other accounts.<br />
<br />
As a result, my <b>level of trust drops</b> significantly. How do I know that they don't store my password in plain text? <a href="http://en.wikipedia.org/wiki/Password#Form_of_stored_passwords">Hashing of passwords</a> is such a basic thing...<br />
<br />
<b>Advice:</b> Do not send passwords via (unencrypted) e-mail. Account activation link is enough.<br />
<br />
<i>Observed at: <a href="http://www.mojwzrok.pl/">www.mojwzrok.pl</a> and many other places...</i>Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.com2tag:blogger.com,1999:blog-6338189494131320361.post-48162349070510500872011-08-20T00:08:00.001+02:002011-08-20T00:09:51.799+02:00Encrypt customer's personal dataI entered an online bookstore. The <a href="http://www.dobreksiazki.pl/rejestracja.htm">registration form</a> asked me for my name, postal address, e-mail, phone number and, of course, my login and password.<br />
<br />
However, it <b>was not encrypted</b> with HTTPS. I gave up right away.<br />
<br />
That's a perfect example how to lose customers.<br />
<br />
<b>Advice:</b> Always encrypt customer's personal data. <a href="http://en.wikipedia.org/wiki/Https">HTTPS</a> is your friend.<br />
<br />
<i>Observed at: <a href="http://www.dobreksiazki.pl/rejestracja.htm">www.dobreksiazki.pl</a></i>Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.com0tag:blogger.com,1999:blog-6338189494131320361.post-44605419577686916822011-08-19T23:31:00.004+02:002011-08-19T23:42:47.458+02:00Välkomna<div>I started this blog because I continuously encounter <b>amazing examples of ignorance and foolish attitude </b>to customers. Those <b>anti-patterns</b> appear everywhere, both in the web and traditional stores.<br />
<br />
I decided to write my observations in one place <b>to prevent designers and sellers from making such mistakes</b>.<br />
<br />
I hope one day it will save some life from frustration and resignation of a customer.</div>Mikołaj Pastuszkohttp://www.blogger.com/profile/05813413575167542395noreply@blogger.com0