Writing a new blog

I’ve been writing here since 2012. Some posts have been extremely popular. For example this one topped the hacker news and received over 30,000 visitors in 2 days and Google engineers responded to that. Others were less popular but nevertheless, this blog receives roughly around 60 visits per day. This makes me feel responsible to write regularly, but due to shift in my interests, I haven’t been updating it lately.

This blog is only about specifying UX errors in other products and suggestions on how to improve them. It’s about the details. As I’ve been working as a UX Engineer I’ve learned a lot during the past few years that I want to share. The new blog is going to have a higher level view and look into the process of product design and development and how to prevent such errors to happen in the first place.

But this is going to change because I have started another blog where I write about UX and product development. Check it out: https://medium.com/@alexewerlof

Amazon Kindle dictionary is sometimes useless

Problem

Amazon Kindle paperwhite is one of the best things I’ve bought this year. It costs almost as much as a Nexus 7 but has the following advantages:

• The battery lasts much longer, even though the display doesn’t go to “sleep” as quick as a tablet (actually I have set it up to be on for 5 minutes since last interaction)
• The whole UX is centered around books & reading. It doesn’t have any apps and distractions. No email or whatsapp notifications. Just pure joy of reading. No temptation to play games or check out Facebook either. It has a browser that is dead slow and its monocolor screen makes its usage limited to emergency.
• It comes equipped with the world’s most famous online book store with good deals. Many awesome books are cheaper in electronic format. In fact I started to giveaway my paper books as gifts and buy their electronic version. I have close to 100 books in my pocket!
• The backlight is adjustable to levels way below most LCD screens and that makes it super useful for reading in the bed and total darkness
• It weights lighter so it’s quite practical to hold it with one hand
• There are a bunch of official plugins and apps that allows sending files directly to your Kindle from Chrome, Windows, Mac etc.
• It has a built-in dictionary that shows the meaning of words and phrases with the touch of a finger.
• The e-ink screen is very similar to a paper.

So Kindle is mainly a device built around a paper-like screen. Here is a comparison between the Kindle and paper version of the same book:

kindle and paper version side by side

However it has some downsides that are not easily forgivable:

• The screen is very very very slow in rendering stuff. Even turn of a page is a UX hiccup. Reading PDFs is practically useless because of the slow pan and zoom. Forget scrolling.
• Images just look weird. Amazon has worked a lot on the UX for text (which is the main part of many books) but when it comes to images and sometimes text with special frames, don’t expect anything but a scrambled unreadable picture.
• The screen can’t show colors. Buying a Kindle version of 100 things every designer needs to know about people wasn’t very useful since many of those colorful illustrations loose their meaning on e-ink screen.
• Occasionally some top sellers have a higher price for ebook compared to the printed version. It’s probably publishers’ desperate try to resist the electronic revolution.

This post however is not about any of those deal-breakers. It’s about that dictionary that comes with Kindle.

So here is how it works: when you’re reading a book, if you want to know the meaning of a word you just long-press it and the dictionary shows up:

Kindle dictionary

As you can see the word “self-indulgence” has a recursive translation of “self-indulgent” in it. By the way if you knew what “self-indulgent” mean you would probably guess the meaning of “self-indulgence” and didn’t need to wait 2 seconds for the dictionary to tell you what it is.

Apart from making the user feel stupid, this dictionary misses an important feature: let’s say the user doesn’t know what “self-indulgent” means in the dictionary definition. Even if she hopelessly long-taps on the word “indulgent” in order to have a better guess, nothing happens. In other words the dictionary doesn’t work for the words it is using to describe another word.

That is annoying considering how many words actually give a recursive definition in the dictionary! But this problem isn’t only specific to recursive definitions. It is about any word in the dictionary.

Solution

A good dictionary is supposed to provide descriptions in simple words so that the user doesn’t have to look them up. But if that is not the case, at least provide a mechanism to be able to search the hard words from the description.

What do you think? What is your experience with Kindle? Would you change something to improve its usability?

Chrome added an annoying translation feature

Problem

Recently Google has added a built-in translation feature to Chrome that has some usability issues. Since these issues haven’t been fixed in the past couple of releases, they might be here to stay. So here is how it works: if you visit a page that is in a different language than your system language (or the main Chrome language), Chrome shows that little popup in the image below and asks if you would like to translate the page. Neat feature if you occasionally use it. However that is not the case when you often visit pages with another language. By the way, there’s a joke that goes like this:

What do you call a person who knows three languages? Answer: Trilingual. What do you call a person who knows two languages? Answer: Bilingual. What do you call a person who knows only one language? Answer: American.

So probably “Americans” designed Chrome but for the rest of the world, this is just a painful UX.

Why U visit pages in other languages?

Let’s demonstrate with an example. Baidu is one of the most popular search engines in China. When you go to www.baidu.com you just want to start typing in the search box. This is a standard behavior in www.google.com. Many people do it almost mechanically without even looking at the screen. However the translation popup gains the focus and doesn’t let you type. You have to click “Nope” or press “Esc” key on the keyboard so that the page regains the focus and you can type again. Note: as one reader reported, while the popup is open many other keyboard combinations on the browser level don’t work either. For example CTRL+W doesn’t close the tab.

Baidu in English Google Chrome

Unfortunately this awesome language aid creates a bad user experience on many websites. The only options that are available for preventing this UX issue is to disable translation on the entire site or for that particular language altogether. But that’s not good if for example you are learning that language and still want to have some help when you need it. Besides there is a hidden tax: Chrome analyses every page upon load to guess its language and see if it needs translation. This costs an extra CPU usage and battery life for every single page (not a good thing on mobile devices). If you click “Nope” and visit the page again (or just refresh it), the stupid popup is going to ask you the same question again like you never rejected it a few seconds ago. Yup! Computers are stubborn, specially when programmed carelessly. It’s ironic that in an age where popup blockers are a built-in feature of the web browsers, they return even more annoying. Check out the comments on this post and Hacker News to see that people have actually left Chrome for its rivals just because of these UX issues.

Never translate this site or language

Another examples: Try searching prices on prisjukt.nu (Sweden’t Pricerunner) and you have to pay that popup tax before you can do anything on the page. This annoyance appears in almost every interactive website that is in another language.

Reminder

The UX wasn’t better before. There was a yellow bar at the top of the screen that asked if you want to have the page translated. This made the page jump a little to the bottom (to make space for that yellow bar) right after it was loaded. This visible jump was annoying. For example if you were going to click a button or link before Chrome found out that this page is in a different language, the page would jump right before you click the button. This special sequence of events may not sound very likely but has happens a lot. For example when a user is a regular visitor, his/her brain remembers where to click (for example navigation bar, menu or links) but this sudden jump makes it harder for the motoric part of the interaction and slows it down. This creates the perception that Chrome is slow even though it was just the language detection feature that took place after the page was loaded. The new interaction model with popup solves that problem. However the yellow bar still exists on the Chrome for mobile browsers (Chrome UX designers figured there was something off with it, so they changed its color to white probably to make it less distracting! Didn’t it help?).

Chrome mobile translate

Solution

Add an option to disable this proactive popup approach.

Let the users choose if they want automatic translation

There is a similar setting under Settings > Languages (hidden under advanced settings):

Chrome Settings > Languages

This checkbox can be selected by default to comply with the current behavior of Google Chrome (occasional users of this feature will not be bothered to leave it selected). But when the user deselects this checkbox, Chrome should give up on guessing the page language every single time. Though the translation icon will be right there if it’s needed (see image below):

The translation feature is still there

If the user chooses “Nope” on a page, please remember this answer and don’t ask on every single load. The popup has a little tiny arrow at its top that makes it clear where it is coming from. User will be able to translate the page when needed. If usability tests show otherwise, add a “translate” menu item to the page menu right after “Find…”.

The translate menu in Google Chrome

PS. one of the readers kindly suggested that such workaround already exists on Chrome. All you have to do is to disable translation altogether (using the aforementioned Settings > Advanced Settings > Languages) and whenever you want to translate a page, just right click and choose the translate menu item as shown below:

Chrome has a page-wide translation menu already

What is your experience with Google Chrome’s translate feature?

PS. If you’re from Google, take a look at the comments in Hacker News and help us reach the right people to fix this problem.

Google’s Response

This post got a lot of attention (10,000+ views) and fortunately it was noticed by Google engineers. Here is their comment:

I’m Kenji Baheux on the Chrome team and have been overseeing this feature with our UX team.

Please accept my apologies for the trouble. We’ve been listening and are making the following changes:

1. we won’t show the infobubble and rely on the omnibox icon if the focus is on an editable field. https://crbug.com/313100 (fixed in M36)

2. the infobubble will stop stealing the focus: you will be able to type, perform shortcuts, scroll the page and so on.https://crbug.com/378643

3. we are experimenting with the idea of never showing the infobubble again and solely rely on the omnibox icon as soon as we observe more than X negative actions within a given timeframe T (starting with X=2; T=24h) https://crbug.com/379035

4. A few other adjustments around the “translated” infobubble (e.g. will not be shown for automatic translation, will not show up if the “translating” infobubble has been dismissed).https://crbug.com/319628

I’m eager to hear additional feedback and would appreciate if you could play with the feature in Canary as we land the different changes.

Windows 8.1 forces the user to interact in a way that doesn’t work

Problem

Wacom is world famous for digital pens and its professional Intuos series are used by millions of artists all around the world. It looks something like this and connects to the computer through a USB port:

Wacom Intuos 3

After connecting a Wacom Intous 3 pen Windows took a couple of minutes to download and install some drivers. But the absolute positioning system which is one of the main features of digital pens didn’t work so I headed to Wacom’s support site and installed the latest drivers for Windows 8. So far so good. Now Windows 8.1 behaves like it’s a tablet PC with Touch interface. This is smart. It even shows this little keyboard on the taskbar that allows me to type with the pen:

Windows 8.1 touch keyboard

However apparently Windows 8.1 fails to detect the touch gestures with this pen (I can live with that). The problem is when Windows tries to teach me touch gestures and the only way to get rid of this “compulsory education” is to do the gesture which is impossible with this device! Windows shows this black popover at the left side of the screen asking the user to swipe from the edge:

Windows 8.1 teaches the user to swipe the edge to switch between applications

It reads like this: “Swipe in from the edge to go back to the last app you were using. Tip: begin with your finger outside of your screen”. So I tried swiping left, right, top, bottom, clicking, double clicking with pen and mouse. But nothing helped. I guess the key message is to use my “finger”. This is not OK. If the user was forgiving for the misdetection of the device, this annoying education makes them regret it. As I’m writing this, the popover is still there and there’s no way to get rid of it. So after finishing this post I’m going to try the old time Windows recipe: restart.

Solution

PS. This section is about interaction design solutions but if you are a user having this issue, the quickest solution is to move your mouse cursor to the top left of the screen.

1. Don’t force the user into any sort of education. Sometimes they can’t do it. Sometimes they have other important things to do and want to skip it. Sometimes they already know how it works. There are tons of reasons why people don’t want to be forced into learning something so don’t force them if you want them to like your products.
2. Do more usability testing with popular devices like Wacom. This device is being used professionally all around the world and when things don’t work out smoothly companies loose money. I would expect Windows to download the original driver or give equally well functionality. The new Windows is behaving like how Linux was behaving a few years ago: many devices didn’t have good support in Linux and when they did, often some of their features didn’t work. I haven’t used Linux lately but Mac OS X installed my Wacom automatically upon connecting it and it worked like a charm. Windows should catch up if it wants to reclaim its dominant position in the market.
3. As one dear reader mentioned, it is possible to disable these “mandatory educations” altogether. However, that may need a little extra search. Here is a good explanation how to turn them off (Note: Group Policy only exists in Windows 8 pro). As of writing this post, that question is viewed 3704 times. This post has been visited 2541 times in less than 3 hours. So I assume this is a quite hot topic. I wonder if Windows designers will fix it. I’ll contact Microsoft and share their insight on this page. Meanwhile you can head to Hacker news and see what other people say about this issue.
4. Add a close button to the popover to let the users close this modal, persistent, sticky popover:

Windows 8.1 educational popover with close button

Windows 8.1 doesn’t run apps in the corresponding screen

Problem

Windows 8.1 just like its predecessors has a good support for multiple screen. With the return of the start menu, you can “pin” apps to your taskbar. This makes an icon that allows you to quickly run an app. Even though the taskbar is exactly duplicated in every screen, clicking an app icon in one screen doesn’t guarantee that it’ll open in the same screen.

This behavior can be quite annoying specially if you’re using a projector. Here is a little image to illustrate the issue:

Trying to run an app in the left screen may show the app in another screen

Mac OS X has the same issue. So when you run an app you really can’t predict where it will show up. It probably shows up where it ran last time, but that introduces an element of surprise since the user expects to see the action (click) and the effect (app) appear close to each other.

Solution

There are a few solutions to this issue.

1. The easiest one is to run the app in the screen where the user has clicked the app button.
2. When user clicks the button using an animation guide their eye to the screen that contains the app. Mac OS X uses this technique, though still the first solution makes it more predictable.
3. If the designers can’t agree or confirm the design decision with usability tests, have some sort of setting in control panel that allows the user to choose weather the new apps load where they last showed up or close to where the run action is initiated.
4. Allow the user to run the app in the current screen with some sort of right-click menu on taskbar. Something like this:

Adobe is really persistent about updating

Problem

Adobe Acrobar reader has this update dialog that shows up every now and then. The dialog has a Yes and No button but that’s just an illusion. The No button is practically not clickable and not focusable! But if you keep clicking on it eventually the dialog disappears. This has happened several times and every time I have to press the No button harder! So I decided to take a snapshot, blog about it and contact Adobe regarding this issue.

Adobe Acrobat update dialog

I personally don’t like it when a part of the system is aggressively asking for update. Particularly when it is Adobe. We haven’t forgotten Flashback, one of the biggest Mac security issues. I know the virus wasn’t made by Adobe, but when an application trains the user’s mind that it needs to be updated often, that very user experience will be an easy target for hackers.

Even though this dialog has a No button, Adobe is actually forcing you to press Yes. It’s not nice. It’s not intuitive. It’s not respectable. It’s annoying.

Solution

There are three solutions to this issue:

1. First of all, improve the quality of your software to reduce the number of updates. There are many applications on a system. If each of them wants to update every now and then user experience will reduce. Remember: no one buys a computer for the purpose of updating it. People buy a computer to have some tasks done (work or game or whatever). Don’t get in their way, even for seconds.
2. Do the updates automatically behind the scene. I really like the way Google Chrome updates itself. It’s very subtle. It’s polite. The menu icon will glow to indicate an update. The update will automatically install on your next browser lunch. It remembers the tabs and goes exactly to the state it was before the upgrade. That’s good user experience.
3. The least you can do is to make the No button clickable. The very fact that there is a button that only works when someone is punching it angrily shows Adobe user experience designers either don’t feel responsible, or don’t care for the user’s peace of mind.

Note

Adobe’s Flash update window shows unnecessarily too often. Maybe I’m an exception, but I haven’t bought my computer for spending time updating system software. I happen to own a copy of Cretive Cloud as well. Adobe updates happen so often that sometimes I think updates are being pushed for the sole purpose of advertisement.

Adobe Flash Update Screen

iPhone doesn’t allow you to change the default hotspot name easily

Problem

We had a power outage at work and even though my work laptop has a battery but the wifi network needs electricity to work. After a few minutes of internet suffocation, I decided to share the internet on my iPhone and keep working. But it was then that I discovered iPhone wasn’t really built with the ambition of being in everybody’s hand. My company has an interesting policy of giving every employee an iPhone and apparently I wasn’t the only one who was sharing his phone’s internet. So I saw something like this when trying to connect my Mac to my iPhone:

Everybody sharing their iPhone hotspot

Good for Apple, I felt like this:

iPhone hotspots everywhere

So naturally I went to the most logical place to change the hotspot name to something customised in order to find it. But there’s no such settings:

iPhone personal hotspot settings

There’s no such setting so the first thing I do after being connected to the Internet is search for how can it be done. Turns out you have to change your phone’s name in order to change the hotspot’s name. It may sound logical but is pretty limiting. See how HTC One allows you to choose your hotspot name (needless to say this opens up in hotspot settings where it belongs):

HTC One hotspot settings

But for iPhone, you’re supposed to leave the hotspot settings, go to General > About and chance your phone’s name:

iPhone 7 change name

A little unexpected but as a user put it “let down by apple yet again! i jailbroke my iphone 4 n installed an app called myWi it allows you to change ssid” (source).

The irony is that Apple is famous for paying attention to user experience but in practice there are many simple cases like this that are problematic.

Solution

Allow the users to edit their hotspot SSID name in the settings of Personal Hotspot.

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:

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

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:

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:

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 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.

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.