Sunday, May 31, 2015

Outreachy week 1 - What is usability?

I wanted to point folks to this excellent start from Gina in our Outreachy usability project! In her post from week 1, Gina answers the question "what is usability?" and provides her thoughts on usability. She has described usability very well, and is absolutely correct that usability is about effectiveness, efficiency and satisfaction. And that users achieve specified goals in particular environments.

Another definition from Joseph Dumas and Janice Redish (A Practical Guide to Usability Testing, revised ed., 1999) describes usability as resting on four points:

  1. Usability means focusing on the users
  2. People use products to be productive
  3. Users are busy people trying to accomplish tasks
  4. Users decide when a product is easy to use

To ensure good usability, we need to engineer it into a product through an iterative design and development process, involve users, and allowing usability and users' needs to drive design decisions.

We can never settle on a design and say "this is good enough, it has achieved usability" because good usability is a changing, evolving expectation. What was considered good usability ten years ago may no longer meet the mark. And what we find has good usability today may not be considered so by our users in another few years.

That is why we need to keep performing usability testing at every release, and within the development cycle. We need that feedback from users who are trying to achieve goals in real scenarios needs. And that is what we will do during this cycle of Outreachy.

Great start, Gina! Follow Gina throughout the rest of our Outreachy project as we examine usability in GNOME.
image: Outreachy

Monday, May 18, 2015

The hamburger icon

The BBC recently ran an article about the "hamburger icon" and how these three lines mystify most people. You can find the hamburger in a variety of modern user interfaces: phones, websites, and desktop environments. The common use of the "hamburger" is to bring up a menu. Even GNOME uses the "hamburger icon" to represent a menu for program options.

I've commented in my hands-on review of GNOME 3.16 that in GNOME, the "three lines" icon replaces the gear menu for the drop-down menu. This "three lines" menu icon is more common in other applications, including those on Mac OS X and Windows, so the new menu icon should be easier to find. I still believe that the "hamburger" is a good choice. Visually, the "three lines" icon represents a menu.

gedit 3.16

Nautilus 3.16

Epiphany 3.16

However, it's important to note that the "hamburger" icon is a learned representation. It is a very abstract icon. In contrast, a "boldface" icon (typically a bold "B") or an "italics" icon (typically an italics "I") represents the icon's action by showing you a sample result, so is easy to learn and easy to remember. But the "three lines" icon doesn't exactly look like a menu; you have to learn what it means, then remember it.

Blogger's edit bar, with "boldface" and "italics" buttons on the left

I wonder if the "hamburger" icon can be improved by including some other marker to suggest an action? In the BBC article, a web developer conducted some tests on his own, and found:

  1. Adding the word "menu" underneath the three lines increases the button's use by 7.2%.
  2. Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%.
  3. Switching the lines for the word "menu" makes 20% more people click.

GNOME might benefit by examining this further. GNOME already includes a box around the "three lines" menu icon, which helps. What if we added a "∨" indicator (or "∧" if the menu is on the bottom of the screen) to the icon, to suggest the icon presents a drop-down menu? I recall older versions of GNOME used a similar indicator, in the form of a small triangle.

Perhaps this is something we can explore in the upcoming GNOME Outreachy. But I think this round of usability testing in Outreachy is already full, so I'm not sure we will be able to examine the "hamburger" icon's usability in any detail, at least in this round. Instead, I encourage others who are interested in GNOME usability to try their own prototype usability test, using mock-ups or paper printouts with test volunteers to see how users respond to the "hamburger" icon with and without a "∨" indicator.

(And if you are interested in participating in a future round of Outreachy for usability testing, this would be a good first project for you.)

Wednesday, May 6, 2015

Fonts for the desktop

I have two laptops where I run Linux: one at home, and one at the office. These are basically the same setup, except at home I run the latest alpha and beta versions of Fedora.

At work, it is important for my documents and websites to look and act the same as my coworkers using Windows and Mac. If I write a document or view a web page, I need to know that I am seeing the same thing they are. So I installed Microsoft's core fonts for the Web on my work system. These fonts were initially released by Microsoft in 1996 to create a de facto standard set of fonts for viewing websites. They are also the most common fonts used in many office documents, at least where I work:

Microsoft's core fonts project was actually a really good idea, and the fonts look nice. But the license wasn't exactly friendly to distributions; you could only redistribute the fonts in the original package format: .exe for Windows, and .sit.hqx for Mac. Fortunately, a few clever developers created a SourceForge project to provide Microsoft's TrueType core fonts on Linux. In practice, this just downloads the original package files (mirrored at SourceForge) and unpacks the archives using cabextract. On my work laptop, I have been using these original core fonts for years.

At home, I have decided to be completely non-proprietary. And that means I prefer to avoid Microsoft's fonts. At the same time, I don't want to miss out on the web experience; when I visit a website that specifies the core fonts, I want to get those fonts. I want to get the same experience as was intended for other desktops. It would be great if websites used downloadable fonts so all visitors always see the intended font, but not every site does this. Because the core fonts are so ubiquitous among proprietary desktops (Windows and Mac) many websites default to these fonts.

How can I use Microsoft's core fonts if I don't want to install the core fonts? The answer is simple: I use other fonts, and set aliases from the core fonts to those other fonts. And that's what I've done.

Fortunately, several high-quality free fonts already exist. Perhaps you know about the Liberation Fonts which aims at metric compatibility with Arial, Times New Roman, and Courier New. The GNU FreeFont project is another, similar example of providing fonts that can replace the core fonts. You can also find fonts under a variety of open licenses from Google Fonts. Most web developers know about the Google Fonts repository, but did you know you can also download the font collection in TrueType and OpenType formats?

Through some experimentation, I provided aliases for the core fonts, using only free fonts. I selected fonts that had similar letter shape and form. While I am not a font expert, I found the uppercase letters A, I, J, L, M, W and the lowercase letters g, i, j, l, t were good places to look for matches. Also, the numbers and special symbols $ and & often provided another comparison. It took some time to go through the font collections, comparing the available fonts with the core fonts. They didn't need to be completely perfect replicas, but representative of the font so that using the replacement effected the spirit of original. With that in mind, I think I managed to find a pretty good set of similar fonts.

Here are the fonts I use to replace the core fonts. On the left, I provide an image of the original Microsoft core font. On the right, an image of the replacement font:

Andale Mono (Source Code Pro)

Arial (FreeSans)

Arial Black (Archivo Black)

Comic Sans MS (Patrick Hand)

Georgia (Merriweather)

Impact (Anton)

Times New Roman (Liberation Serif)

Trebuchet MS (Alegreya Sans)

Verdana (DejaVu Sans)

I skipped Webdings, because no one really uses Webdings. I also don't provide an alias for Courier New, although I suppose I could use Liberation Mono for that.

(A note on Comic Sans MS: This is a handwriting font, and not often used these days. Many people don't like it—and in many offices, its use is effectively banned. But my mom uses Comic Sans MS in her emails, and I like the "homey" touch that it provides when I read notes from my mom. I didn't want to lose that connection, so I found a suitable replacement.)

While Tahoma wasn't part of the core fonts, many websites and web applications rely on Tahoma. According to Wikipedia, the Wine project includes the free and open-source fonts Wine Tahoma Regular and Wine Tahoma Bold released under GNU Lesser General Public License designed to have identical metrics to the Tahoma font. So I could find the Wine Tahoma fonts and use those, but I found the Liberation Sans font is close enough:

Tahoma (Liberation Sans)

Microsoft later defined the ClearType Font Collection, as part of Windows Vista. These are sometimes referred to as the "C" fonts because every font name in the collection starts with the letter C. I don't have a use for most of these fonts, except Calibri. Microsoft set Calibri as the default font in Microsoft Office, so I often get documents from other that use the Calibri font. Also, many websites use Calibri as a first preference, so I wanted to have a replacement for it on my system. (Even my blog uses Calibri. The body font string for my blog is Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif.)

Calibri (Source Sans Pro)

I'd like to know how you set up your fonts. Do you use similar fonts, or something different? Let me know! If there's a better replacement out there, I'd like to hear about it.

Friday, May 1, 2015

A brief glimpse into scenario tasks

I am mentoring in GNOME Outreachy this summer. As part of the Outreachy application process, we ask applicants to make an initial contribution to their project of interest. For usability testing, I ask applicants to read my article about usability testing, and conduct a 1-person usability test of their own. One of the applicants (Gina Dobrescu) provided a very complete analysis in her 1-person test. For part 1, refer to Gina's brief glimpse into usability testing. This is part 2 (usability test scenario tasks) from Gina, posted with her permission:
Scenario: Imagine that you are a journalist at "Le Monde" newspaper, in Paris. You are at work, and today your primary task is to finish your article about your favorite author's last book.

  1. Today you're in a different mood, so after you turn on your computer, you realize that you don't like the actual background image of your desktop, so you decide to change it. Please search for the kitty-cat.jpg file and set it as your Desktop image.
  2. After a few hours of working on your article, you decide to take a coffee break, and when you leave you have to lock your computer. You would like to personalize your computer, so you decide to have your favorite color as background image. Please change your "lock-screen" background image; verify the image changed successfully.
  1. As your break is not finished yet, you come back to your computer and decide to continue the story you started reading yesterday. You don't have much time left, so you decide to set an alarm for the end of your break. Please set an alarm for 5 minutes now.
  1. You want to read the story, but you forgot where you saved the book. Please find the "Cinderella.pdf" document and open it.
  2. While you are reading, you want to be comfortable, so you make the document scroll by itself.
  3. The break is over, but the next time you will want to remember the last page you've read (in this case the 4th page). Please bookmark this page, with the name "the shoes".
  1. The break is over, so now you have to finish your article about Tolkien's books. In your Working folder there are a lot of files and you don't remember what is the name of the file corresponding to your article. Please go to the Working folder and display all files as list; show the last modified articles.
  2. You would like to make it easier for you to access your working directory. Bookmark this location. Verify that the bookmark has been saved.
  1. You receive a call from a colleague who read your article and he tells you that you referred to another book when you wrote the observations in your article: you used "The lord of the rings" instead of "The Hobbit". You would like to repair your mistake. Please open the "tolkien.txt" file from the Working folder and replace all occurrences of "The lord of the rings" with "The Hobbit".
  2. Your colleague also suggested you to change the characters names' style. Please go to line 78 and turn all names into capital letters.
  3. For your daily work, you have to keep track of your work progress, so when you finish your tasks you have to insert the exact date and time. Please insert date and time at the end of the document.
  4. Now you want to review of your article. Please set the full screen view, then exit this view.
  5. After you finish, please save all your changes.
  1. You got the news that your article was very well rated on the newspaper's official page. Please navigate to the "" website.
  2. As it has become famous, your article was also published on another newspaper page. Though, you are not familiar with this website so you want to save the page with your article and show it later to your friends. Please open a new tab, navigate to "" and save a shortcut to it.
System Navigation
  1. You decide to stop working, and close some of the opened files. Please show a global view of all your current opened applications and close two of them.
  2. After you finished, please switch to another workspace.
  1. Now it's time to celebrate and you decide to listen to some music. Please open the Music application.
  2. As you open this application you observe there is only one song, your favorite. Please put it on repeat.
  3. After you finish, close the application.
  1. A problem occurred with your USB stick and your friend told you that there is an application that can help you solve this problem. Please install the “gparted” application.

A few minor edits by me, for formatting and grammar. -jh