Google can’t search for vendor-specific CSS properties

Problem

Most browsers use a prefix for their experimental CSS features. For example -moz-boxsizing is used by Mozilla browsers to alter the default CSS box model used to calculate widths and heights of elements (reference). But when these properties are searched in Google, they generate no results:

Google can't lookup vendor-specific CSS properties

As weird as it looks there is a reason for it: Google interprets the leading hyphen as a negation operator. In other words when you’re searching for -moz-boxsizing, you are in fact searching the internet for all articles that don’t have “moz-boxsizing” in them. In fact at the moment Google search isn’t smart enough to know:

  1. Searching all internet excluding a phrase is a none-sense search
  2. When the only term in the search box starts with a hyphen, there’s a good chance that term is the actual search term

Of course there are several workarounds for this:

  1. Embed the search term in quotation marks to force Google search for your term. i.e. “-moz-boxsizing”
  2. Remove the hyphen from the beginning of the search term. i.e. moz-boxsizing

The problem is that the search experience is not as smooth as it can be and you have to edit your search term. Those few key strokes waste time and for a search engine that takes pride in its usability, this is a problem. It is the machine that should adapt to humans, not the other way around. Why? Because we created the machine to serve us, not the other way around.

Solution

Apart from the workarounds above, there is a very simple solution to this issue. The search interpretation algorithm can be optimised to consider two things:

  1. If the search term starts with hyphen and it is the only term in the search box, assume it is quoted. You can even show it as quoted in the result page, if you want to teach people about that workaround, but please don’t stop them with the wrong error message (no results) and expect them to find that help page. Remember, most people don’t even know the search operators. Should they be punished with waste of time, wrong error message and forcing them to edit their term? I don’t think so.
  2. As a quick hack, let people search for vendor prefixed CSS attributes. This solves the problem for web developers, but an extension to this idea can involve some R&D. The search analysts at Google probably can do a little research and see how many search terms that started with a negative operator is followed up with removal of that operator. Probably this gives a signal on what search terms actually need to start with a hyphen. As a practice I suggest you compare the result of searching for ls vs. ls -l
Advertisements

HTC Sense Pushes Minimalism too far

Problem

HTC has customised the standard Android user interface with its proprietary product called Sense. This probably gives a competitive edge to HTC products, but it also introduces a level of independence from mainstream standards to HTC designers. This is powerful, but as I always say “with power comes corruption” and this one is no exception. Being the proud owner of various top HTC phones for the past 6 years, I feel disappointed about the recent bold decisions in the design of their flagship product HTC One.

The problem is that HTC designers have decided to remove one of the 3 crucial Android controls from the bottom of the screen. Most android phones have these 3 buttons as seen in the following image:

Image

From left to right they are:

  • Back: goes to the previous screen (or activity in Android programming terminology)
  • Home: returns you back to the home screen where you can see your desktop, widgets and run programs
  • Switch app: allows you to switch between running apps, kinda like ALT+TAB on PC or CMD+TAB on Mac.

Now somehow HTC designers figured out that they can remove the “Switch app” button and make room for their logo instead. The user is expected to double tap the home button in order to switch between apps. By the way the above image is from HTC One X, that is the father of HTC One. So here is how HTC One’s buttons look like:

Image

In the latest HTC phones you are supposed to double tab the home button quickly to be able to switch between apps. That is nothing new. iPhone works exactly the same. However, this has three issues:

  1. This behaviour is not consistent with other Android phones
  2. This introduces a mapping issue where two irrelevant actions are mapped to one control
  3. After 4 months of using this phone I still haven’t got used to double-tapping the right bottom corner of my phone so often so I have to use two hands (and have dropped the phone enough to justify spending 200 SEK on a protective shell)

Solution

The obvious solution is to return the Switch app button. There is a reason it was there, and let’s face it, removing a button to open up space for the logo isn’t the best way to keep the customers happy. Nor is it the best example of minimalist design.

Another solution would be to have the “Home” functionality when the user presses on the HTC logo while the Switch button is back to where it was before. So again we’ll have three buttons but the home button is “covered” with the HTC logo. That is an acceptable for the users. It’s not the best interaction but it’s still better than what we have now.

GMail attachment hint has a misleading message

Problem

GMail has a smart feature that tries to help you not to forget attaching files. Here is how it works: when you’re done writing your email and press send, GMail scans your email for the word “attach” or “attachment” and shows you a warning like this:

GMail attachement error

GMail attachment error

Now why is it a problem? Because when the user is done writing their email and press send they consider it to be over. Any message that comes after it, will be considered as a disturbance preventing them from reaching their goal of sending the email. So the disturbance should be eliminated as soon as possible so there is a higher chance that the message will not be read. More often than not, people are so confident in their action that they don’t bother reading the dialog and just press “OK” saying “I know, go ahead” in their mind.

I have been in a lot of user tests and if there’s one thing I’ve learned about dialog boxes is that users rarely read them. For most users the default (highlighted) button is what they press by default because they trust the designer of the system with choosing the best default.

Let’s look at the interaction in slow motion. User is done writing and now their goal is to send the email. He presses the send button. He sees a modal dialog that says “Did you mean attach files?”. He’s like “Ahhhh! Oops! Yeah! Positive!” so he presses the positive button that reads “OK”. Ummm, wrong button! The email is sent! Time to write another email with the attachment! By the way “this is a great way of punishing the users who don’t read your message“. I’ve heard it from programmers with no sympathy for the user.

gmail attachment error oops

Essentially this smart GMail feature is useless in this flow. Except warning the user that the email was sent without attachment which is better than nothing.

Solution

The feature itself is smart, so I wouldn’t remove that. However, the message needs to be re-formulated to solve the UX issue and this can be done at least in two ways:

  • Formulate the first line to read like: “Send anyway“? And describe the issue in the message body. This is not the best because it assumes everybody reads the body of the message. But at least the buttons are the direct answers to this question.
  • Change the message to “Send without attachments?” and in the message body describe a little more why GMail thinks there must be an attachment.

Side note

If you’re going to fix it, please keep in mind that when the user sees the error message, he’s half way outside the door so let him send the message as soon as possible if he choose to do. After all computers are not always right! Put the user in control and provide these smart features just as a hint. I think it is a wise choice to have “OK” (for Sending) as default button on that dialog. Please don’t change that otherwise the interaction flow can be like this:

  1. The user is done writing an email with the word “attachment” in it.
  2. Upon sending, GMail stupidly complains about the lack of attachment.
  3. Pressing “OK” actually doesn’t send the email and annoys the user forcing him to read the message.

One may argue that reading a message is not such a big deal. Users are supposed to do that. Well, we are human and humans are a mess. If you want to create a great user experience, don’t ignore that! :-)

Finally it should be mentioned that one of the most important parts of every error message is to offer a solution. The current messaging doesn’t clarify what’s the action that needs to be taken. We may assume that everyone knows that is an attachment, but that assumption may not be true for people who don’t know English very well and for whatever reason they are not using GMail in their mother tongue.

Pebble steals your email address from an unsubscribed form

Problem

Pebble makes smart watches –the kind of watch with a digital display that connects to your phone to show your messages and information that are shared via an application installed on the phone. Their website promises that it “can” do a lot and I have no doubt that there’s at least one thing it can do great: stealing my information!

Pebble promises to do everything you can imagine

Pebble promises to do everything you can imagine

So the story is that I went to Pebble’s website as a prospective buyer. I should admit the design of the website is fabulous and modern. So after getting some technical info I decided to buy one. I went to the checkout page and filled the information starting with my email address. But at the bottom of the page, it asked for my credit card number. With all due respect for its hefty features, I didn’t feel comfortable giving these sensitive information mainly because I don’t know the website (by the way, there’s a company that handles this kinds of risk).

Even though Pebble looks like a great concept, the website looks like a one-product start-up with no connection to a big brand that I know. It’s not Sony. It’s not Philips. It’s not Apple or Samsung. It’s Pebble, a brand I got to know a couple of days ago when talking to my geek friends. Therefore no trust is built on the first place. So I gave up the checkout page and headed to a shop I trust: Amazon!

A day later I got a marketing email:

Hi there,  You forgot me and your wrist is probably lonely. I just wanted to remind you how awesome I am, plus, they’re letting me ship anywhere in the world today for FREE!  I promise to sync seamlessly with your Android or iPhone and give you immediate access to what's most important to you. Want to know when the surf's up, check the scores or simply find your phone? I'm a Pebble. I can do that. Click here to take me home with free expedited shipping.  See you soon, Your Pebble

The capture your email address even without submitting the form

So the email is telling me that I’ve been sloppy and forgot the watch back in the shop and my hands are “lonely” without it. My immediate reaction was: “I didn’t forget you! I didn’t even want you because the shop that sells you wanted my credit card information and I don’t even know the site! PS. My wrist is not lonely! I have lots of watches!”

So the problem is: if I don’t trust the site on the first place, why would I be happy that they have captured my email address from an un-submitted checkout form and used it for spamming me with useless marketing insult?

I’m not sure if legally a company is allowed to capture user information that haven’t officially be submitted. Being a web developer myself, I went back to their website to see what’s going on. Turns out Pebble actually sniffs whatever I type in the email address field and dynamically sends it back to the server using an Ajax call. Here is an example of network message sent to their server when I wrote something in the email field:

An example of how Pebble sends your email address without even submitting the form

An example of how Pebble sends your email address without even submitting the form

The email definitely didn’t convince me to buy a Pebble. If anything, it gave me a reason to be suspicious to how they handle my personal information that will be naturally shared with my smart watch. If they are so aggressive stealing my information from an un-submitted from, how can I carry it on my arm on a day to day basis and give it full access to my email, SMS, Facebook and other personal information via pairing with my smartphone? Never ever!

It’s like you go to a shop to just take a look at the merchandise and next day when you wake up the delivery man is banging on their door saying: “hey you forgot to buy what you were checking out yesterday at that shop!”. So let’s make it clear. I’m not buying because:

  1. You tracked me even though I didn’t explicitly mentioned that I want to be in touch (some websites have a submit form that is more polite)
  2. You actively used this unwanted tracking information to approach me with unwanted advertisement (that says you don’t care about my privacy policy)
  3. I am not going to trust an aggressive data-gatherer with a product that is directly exposing my security to a 3rd party that I don’t even know! (who is Pebble after all?)
  4. You use negative copy and convict me of being sloppy and forgetting what I was about to do (let’s be honest, this may apply to 1% of people who have a fish memory, but the rest of us know why we leave an activity)
  5. Your email doesn’t give me any new information. The price is the same and the shipping is free even when I use an un-tracked new browser session.

Solution

First of all, marketing people are the most unpleasant people after the security people when it comes to user experience. (How many times they bother you by ads or stupid security mechanisms daily?)

Sending a marketing email to someone that has left the checkout form may sound like a smart idea at first glance, but they should keep in mind that if you have left their page it is for a good reason and they should respect your choice. It’s not like now that you have left their page, they have nothing to loose and can use the most aggressive marketing methods to hunt you down to come back and buy from them! People may leave a website for many reasons: some don’t have enough money at the moment, some cannot make up their mind and need to ask their friends or lookup the reviews, some are there just to see how much it costs because they are curious… Let people leave with good impression. They may come back. If not, they’ll talk nicely about you with others. This is exactly why a polite salesperson says goodbye and wishes you a nice day when you leave their shop without even buying something (not all of them do that though, but when they do, I feel connected and important. I will definitely keep that shop in mind when I’m out to buy next time).

So if you want to get in touch with your prospective customer, use a “submit to newsletter and offers” website. I submitted my email happily to Qualcomm’s Toq smart watch website and happily read their email.

Notes

Most smart watches need you to install an app into your phone in order to send the information to the watch or back to the servers of the company that made it. Pebble has such an app too. So I went to the Android market and found the Pebble app to see what kind of information it accesses and here is the list of permissions this app needs today:

  • read sensitive log data
  • read your contacts
  • full network access
  • Your personal information
  • receive text messages (SMS)
  • reroute outgoing calls
  • read phone status and identity
  • test access to protected storage
  • Your social information
  • read calendar events plus confidential information
  • modify or delete the contents of your USB storage
  • pair with Bluetooth devices
  • access Bluetooth settings
  • find accounts on the device
  • prevent device from sleeping

I don’t have any stats on how many people actually read the permissions before installing their apps (or even buying such “smart” devices), but it will not hurt to ask why a smart watch needs to re-route my calls or have full network access while having access to my personal information?

I’m sure Pebble has very good answers for the issues mentioned in this post, so I’ll contact them and share any information they want to share.

You can’t turn off the shutter sound in iPhone

Note: this article is a part of the series iOS issues.

Problem

There is no way to remove the shutter sound on an iPhone except putting the phone into silence mode! This makes a relation between two irrelevant features: your phone’s ring tone and notification sounds will be controlled by the same button that you are forced to use for shutting up the camera. If you take a photo in silent mode and forget to turn on the sound, you will probably miss your calls or notifications. If you remember to turn on the sound, you may take the next photo with the shutter sound.

A lot of people have this issue. And the only way they have found is to put the phone into silent mode. The main issue is using the same control for two different functions. This is a mapping problem.

Some people pointed out that phone companies have to embed the shutter sound by law in certain countries. Well the fact that they allow silencing it, is contradictory to this compliance.

Probably the reason is to make a sound so people will notice if you are taking a photo of them. But what if you are not taking a photo of them? From my personal experience, you’ll most probably annoy people around you when taking a photo. For example:

  • in a library you are taking a photo from a book title or magazine to read later
  • in the classroom when you want to take note from the whiteboard instead of wasting time re-writing it at the same time the teacher is teaching it
  • in the coffee shop when you want to take a photo from your receipt for archive reason
  • in your kids bedroom when you want to take a photo of your dearest while they are asleep
  • or just documenting a crime without taking getting attention or being a victim to it

There can be many other scenarios where you need to take a photo silently, but you can’t disable one of your phone’s core functionalities and remember to turn it on after that!

Solution

Add an option for turning off the camera shutter sound. Ideally with a drop down menu that allows changing the sound and silencing it.

The close button doesn’t really close applications in Mac OS X

Problem

Note: This post is part of a serie about top Mac OS X usability issues.

Having a little “X” button at the top of the application window is a de-facto standard to close an application. Just like Windows and Ubuntu, Mac OS X has these buttons too:

The minimize, maximize and close buttons in Windows 7

The close, minimize and maximize buttons in Ubuntu 12.10

The close, minimize and maximize buttons in Mac OS X Mountain Lion

But in Mac OS X, this button doesn’t actually close the application and it confuses the user. It merely minimizes the application. In some apps this stops the minimized application. In other apps there is not much difference between closing and minimizing.

Story

It’s been a while I want to write about this particular confusion but today something funny happened that made me write it now. Today Apple released Safari 6.0.2 so the App store suggested the update:

App store announces an update for Safari 6.0.2

But I was reading something on Safari so the update procedure suggested me to close the Safari:

It suggests closing Safari to continue the update

I clicked the close button but nothing happened. I remembered that the Mac OS X behaves differently so I guessed the app is not really close. In fact you can see if an app is closed or not by closely looking at the taskbar. There will be a little white light under the apps that are “closed but actually open”. For example in this picture:

How to tell which apps are actually open in Mac OS X

The first and second apps (Chrome and Safari) are open while the third and fourth apps (Firefox and Opera) are closed. You can tell it from that little tiny light under the logo of the application.

So I had to click on Safari to open it again. Then forcefully close the application by pressing CMD+Q (keyboard shortcut) or alternatively I could use the application menu next to the apple logo and choose Safari > Quit Safari.

The update happily continued and finished the job. I’m sure ordinary users who buy Apple products just because they don’t know and don’t want to learn so much about how software works, will end up restarting their computer for this update to take effect. Yes, I’m sure! I’ve seen those users.

Solution

This interaction model is so interwoven into the Mac OS X that probably Apple will never change it. They may have their own reasons for such weird behaviours but whatever it is, the result is confusion, frustration and eventually dissatisfaction from the products.

The solution is simple: close the application when the user clicks the close button! Don’t keep them in RAM.

Like many other usability issues, there are some programs that make it behave the way it is supposed to do for example RedQuits. I wouldn’t install an app to fix this misbehaviour. Why would I buy a car with an uncomfortable chair and then pay extra to switch the chair?

More

Chris Shiflett has put up a list of top 10 usability issues in Mac OS X and this close-button issue comes second in the list!

Mac OS X separates the menu from application

Problem

Note: This post is part of a serie about top Mac OS X usability issues.

Everyone who comes from the world of Windows to Mac will notice one big different: the menu bar is always separated from the application! So there is no menu bar at the top of the application GUI. The menu bar always appears at the top of the screen with the rest of the OS-specific icons and menus. Here are some images to show you what it looks like:

Firefox and its menu in Mac OS X

Finder and its menu in Mac OS X

Spotify and its menu in Mac OS X

User interface separation

This visual separation makes it hard to for the user to associate the application with the menu actions. Think about it this way: you have your car with the driver seat and everything but the steering wheel, gearbox shift, gas and brakes are separate from the car and installed on the road side! I made a little sketch to show how ridiculous this is:

This is how an Apple car may look like: driver controls are separate from the body

It would be interesting to mention that the menu at the top of the screen is not solely for this application. It also contains some menus from the operating system itself as well as general system icons!

How the OS X menu bar is shared between application and the operating system

To make the situation even worse, not all the controls are put on the menu bar. In fact there are some controls and menus in the main GUI which makes it every harder for the user to identify where the commands are hiding. Here is a pop up menu from Finder together with its menu at the top of the screen:

Besides the top screen menu bar, apps have their own menu too

One may argue that this is a popup menu and it is supposed to appear in the main interface. “yes, exactly” I would reply and with the same argument, I want to see the application-specific menu in its main interface as well!

Where does the menu belong?

Another issue is that you may have an app on your screen, but the menu is from another app! For example you may have two instances of TextEdit open. TextEdit is the Mac OS X equivalent of Windows Notepad. You are working in one document and you want to copy the selected part from another document. Something like this:

Two TextEdit windows open in Mac OS X

When you natively click on the Edit menu, you are actually clicking the edit menu from the current window. It takes an extra click on the other Window for the menu to change context. You will not see any indicator of change in the menu, you should just listen to your heart and feel the change (it’s a feedback issue). In Windows every application has its own menu inside its GUI. This simple perception mistake can be avoided in Windows:

Two Notepad windows opened in Windows 7

Extra monitor/projector is headache

This one is probably the worst side effect of having the menu separated from the GUI: when you have an extra monitor or a projector, the main menu is shown only in one of them! Yes, that’s right: it means if you have an app on one screen, you may need to move the mouse all the way to the other screen every single time you want to use the menu! “Unbelievable” for those of you who are not an Apple customer and think Apple is all about usability, “daily headache” for those of us who paid to buy an Apple Mac OS X product!

For example, lets say you have Finder open in one monitor and Opera in another monitor. While working with Finder, you decide to change some preferences in Finder, you have to bring the mouse all the way to the other monitor to access the menu from Finder:

If you have two monitors in Mac OS X, the main menu always appears on one of them.

And this is even harder when you have connected a projector because dragging the mouse to your screen has always this weird “teleport effect” where the mouse travels a few meters from the projector to your laptop screen when it reaches the edge of the screen. It is confusing, misleading, hard to use and just an embarrassing way to present your Mac at a meeting!

It is of course possible to move the menubar from one screen to another in the Mac OS X Display settings but then for the applications in the other screen you have to drag the monitor all the way to the projector.

Solutions

All the problems mentioned in this post can be simply solved by having the menubar together with the main application window. Microsoft is not exactly known as the maker of the best user interfaces but it got at least one thing right: all the pieces of the GUI are together.

Apple has always has the main menu bar like that. So the users get used to this. It is so well established that there are apps created to solve this issue (e.g. SecondBar). Given their complicated political conflicts, it would be extremely hard for Apple to behave like Microsoft. However, I don’t think Apple can have any strong argument for not putting the menubar together with the main application GUI. If they want it, they make it happen and then they can brag about adding a cool new feature to the next version of Mac OS!