Friday, December 18, 2015

On digital engagement

I recently found an article I'd saved from last year's EDUCAUSE Magazine, on Setting the Stage for Digital Engagement: A Five-Step Approach. The Fall 2014 article advocates that now is the time for higher ed institutions to "build an institutional structure for digital engagement" and to do so "smartly and creatively." It's an interesting read, moreso because it introduces concepts from Usability testing for higher ed to create more engaging and interactive online systems.

I wanted to highlight the five steps listed in the article:

1. Understand the environment
It's all about understanding the users. If you have worked in Usability testing, you will recognize the first step as crafting sample Personas for your products. From the article: "Developing personas creates an opportunity to build with the end in mind by creating a shared understanding of who the product or service is for. " And the article includes a sample Persona for "Elena," to demonstrate the method.
2. Position the institution for digital success
This step highlights the execution of a digital strategy, from finding "the right people to advance core digital initiatives" to embracing "matrixed reporting and project teams." Digital engagement must become a method, so incorporate it into project planning.
3. Develop a product management mindset and approach
From the article: "Product management in higher education has often been associated with stewarding a large vendor's product through the enterprise, perhaps an HR performance management tool or a student information system. Today that product management concept needs to extend to embrace new types of properties, such as high-frequency publishing websites built on open-source software." Organizations must instill a cultural value in favor of digital engagement.
4. Champion user experience
I view usability and user experience as related, but different. Usability is about getting something done; user experience is about the user's emotional impression. Lots of things can affect the emotional experience, including colors, fonts, and images or icons.
5. Prepare for the next wave of digital and social engagement
Engagement doesn't stop with the application; in a modern enterprise that must respond to user demand, digital engagement also means user interaction in digital media. The article advises: "Find the local social media leaders and empower them. All colleges and universities today have people who are passionate about their work and who are blogging, tweeting, and/or posting. … Find such people, support them, and connect them to others within the institution."
photo: Ged Carroll

Tuesday, December 15, 2015

LibreOffice user interface changes

This semester, I have been teaching an online class on the usability of open source software (CSCI 4609 Processes, Programming, and Languages: Usability of Open Source Software). I'll write a reflection on this soon.

In our class, I asked students to do their own usability test as a final project, from capturing the Personas, documenting the use Scenarios, defining the Scenario Tasks, and moderating a usability test on their favorite open source software project. To get them ready for the final project, I had students moderate a "mini-project." I selected the topic for the mini-project, based on what open source software everyone claimed some level of familiarity with.

We did our usability test "mini-project" using LibreOffice. This was interesting for me to observe as the instructor, because I am a user of LibreOffice on Linux, and have followed (somewhat) the user interface changes the project has made to improve usability.

I'd like to take a moment to share these three snapshots in LibreOffice's usability: from 4.3 to 4.4 to 4.0.






Please ignore the different user interface font in the 5.0.3.2 screenshot. I have been experimenting with Droid Sans as my GNOME user interface font, in researching another blog post about GNOME.
(That blog post is coming up in the next few weeks.)

What I find interesting is the toolbar becomes increasingly complex, filled with more tools. A few changes that interest me:
  • LibreOffice provides more options to save your document in later versions, adding a "Save As" icon (floppy disk with a pencil) but dropping the "Send" option (envelope).
  • Relative position of the "Spell check" icon ("Abc" with a green checkmark) changes from version to version.
  • Character formatting options expand in later versions. From 4.3 to 4.4, you can now add strikeout, superscript, and subscript. from 4.4 to 5.0, you can also do outlining.
  • Relative position of text color and highlight changes.
  • Placement of indent (and "out-dent") and bullet/numbered lists icons changes from version to version, including relative position.
  • Overall, the user interface (including Properties menu, icons, etc) seems more complex in later versions than in earlier versions.
The usability test mini-project from my class didn't exercise most of these new tools on the toolbar. But ours was a very straightforward test. Our sample Persona was an 18-year-old university student (liberal arts major) using LibreOffice for the first time. Our Scenario Tasks (the tasks that form the usability test) exercised only basic functionality. This was not a "deep dive" into Microsoft Word fidelity or exercising "power user" menus; these tasks were about a college student working on a class paper.
This is a heat map of the usability test results. In a heat map, you code the difficulty experienced by the tester during each task. If the tester was able to do the task smoothly, without difficulty, then it's green. Some difficulty is coded in yellow, but not too bad. Increasing difficulty is represented in orange and red. If the tester was unable to complete the task at all, we code in black. (White shows a task that was skipped during the usability test.)

Each row in the heat map shows a scenario task, summarized here in a few words. Each column represents a different tester.

Comparing these test results to the user interface changes in LibreOffice, most of the toolbar icons aren't used. So these results don't speak to the UI changes there. This usability test mini-project did exercise "Save," "Save As," "Save As PDF," "New Document" and "Center text" functionality. However, we found that most testers skipped the toolbar, and went right to menus. Interesting.

These usability test results highlight the difficulty a student has in setting a page number in the header of a document. Note that many testers experienced some frustration in this task, and some were not able to do it at all (black).

I hope to see more usability testing of LibreOffice in the future. I haven't found a project on usability testing at the LibreOffice website, but LibreOffice doesn't seem to do usability testing anyway. I hope this changes. User interface changes should be driven by users. As LibreOffice adds more complexity to the toolbar, I hope they will stop to consider how real people use the software (users are busy people who are trying to accomplish real tasks) and how they access its functionality (usability).
image: LibreOffice

Friday, December 11, 2015

New maintainer for Cantarell

Jakub Steiner and Nikolaus Waxweiler write about Waxweiler becoming the new maintainer for the Cantarell font. The post also mentions that Cantarell had a few rendering issues that are now being addressed:
Cantarell was full of off-by-ones-or-twos and technical don’t-do-thats, diacritics were inconsistent and Cyrillics still need a look-over. The bold face was in an even poorer state. Back in June 2013 Adobe’s contributed a new high-quality OpenType/Postscript-flavor hinting engine. The problems were only magnified because the new engine actually takes hinting information seriously and will spit out garbage when the font designer isn’t careful.

Nikolaus has cleaned up the fonts considerably by fixing the blue zones, outline precision to fall within them and numerous other problems. You might also notice that letters like bdfklh are a bit taller for a more harmonious look. It should display consistently at all sizes now.
I am thrilled for this news! For a while now, I have replaced Cantarell as the default font in my GNOME desktop with the Droid Sans font. It just looked better on my display at work. (Oddly, Cantarell still looks great on my laptop at home.) Droid Sans is a nice user interface font, and it has a modern look. With the improvements in Cantarell, I look forward to switching back.

This also comes at an interesting time. I have been planning a blog post to discuss the GNOME user interface in terms of branding and wayfinding. In preparing the post, I have been breaking down what I perceive to be the essential branding elements, what are the minimal visual elements that define "GNOME" as a desktop interface. And in doing that exercise, I discovered that it's not really today's "GNOME" without the Cantarell font. Cantarell is part of of the visual branding for GNOME.

Look for that update in the next few weeks.
image: Wikipedia

Wednesday, November 4, 2015

World Usability Day on November 12

If you are in the Twin Cities area, I would like to share this special announcement about World Usability Day at the University of Minnesota, on November 12.
The University of Minnesota will host its tenth annual World Usability Day at the Saint Paul Student Center Theater on Nov. 12 from 9:30 a.m. - 4 p.m. This global event aims to unite communities around the premise that the services and products important to life should be easier to access and simpler to use.

The theme for 2015 is innovation, and the day’s agenda centers on the many ways that innovation can enhance the human experience. Panels and presentations will highlight innovation in usability and user experience. Scheduled break times will offer the opportunity for conversation and networking.

Discussion topics will include:
  • Is innovation just a buzzword for novelty?
  • How do you teach/train/credential/measure innovation?
  • Planning a Space for Innovation: how do we make an environment conducive to this thinking?
  • Design Thinking
  • Innovation in Usability; Combating Bias and Artificiality, Gaining Actionable Value
This is a free event to all members of the University community.
image: World Usability Day

Tuesday, August 18, 2015

The save icon needs an update

I was planning to write a blog post on the usability of LibreOffice, specifically Writer, when I noticed that the screenshots I had taken from 4.3.5.2.0 and 4.4.4.3 both used the "floppy disk" icon for the "Save" action.

Icons carry meaning, the same as words. In fact, we use icons to replace words. In user interface design, icons convey the meaning behind an action, but doing so without words. This saves space on the screen, but also makes it easier for the same program to address multiple languages. Whether you have your system set to English or French or German, you see the same icons.

So it baffles me that the floppy disk continues to represent the "Save" action in so many user interfaces. You can see from these LibreOffice Writer screenshots, the "Save" action in both versions uses a floppy disk icon. I'll note that 4.4.4.3 is the latest version of LibreOffice Writer.

LibreOffice 4.3.5.2.0 on Fedora Linux (screenshot by me)

LibreOffice 4.4.4.3 on Fedora Linux (screenshot by me)

And it's not just LibreOffice that uses a floppy disk icon to communicate "Save." Microsoft uses the venerable floppy disk icon in the latest version of Microsoft Office:

"Microsoft Word on Windows 8" by Source (WP:NFCC#4). Licensed under Fair use via Wikipedia.
Do an image search for "save icon" or "save button" and you'll quickly be presented with floppy disk images. There's even a floppy disk icon on Entypo called "Save." The floppy disk has become that ubiquitous.

But what is my problem with the floppy disk icon? No one under 30 recognizes it as a floppy disk. It is just some funny-looking square that means "Save." Users have been forced to learn the meaning of an icon. But the icon is supposed to be obvious in its meaning.

The "Save" icon needs an update. We need to change the "Save" icon to be meaningful to a variety of users, not just those that grew up with the older technology.
image: Free Icons Download

Sunday, August 9, 2015

Gina's usability test results (part 1)

I wanted to point everyone to Gina's usability test results (part 1), as part of her internship with Outreachy. Gina has been working on a usability test of GNOME, and in this part of her analysis, Gina provides an overview of the usability test results: what went well, and where testers encountered difficulty.

Reading through the results, it seems Gina's testers complained most about lack of obviousness, and lack of feedback. They did very well with familiarity to other platforms.

I find it interesting that testers were confused about the application menu, and the use of right-click instead. I think more work is needed in the application menu. In my previous usability tests, menus were an important part of usability. In GNOME, some actions are in a “gear” menu, while other “top level” or “global” actions are in the application menu.
image: Outreachy

Friday, August 7, 2015

Open source is coming to campus

I wanted to share an upcoming open source software event that we are hosting at my campus, at the University of Minnesota Morris. Working with OpenHatch, we are connecting mentors with students and members of the community for a one-day event. We'll talk about what open source software is, and help people get started with their first contribution to open source software projects.

I will be there as a mentor, and I am already planning a few ideas:

1. Atomic Tanks
A trajectory-based tank warfare game, similar the old Scorched Earth game for DOS, or like a very simple version of Worms.

Project ideas:

Very little/no programming experience required:
The game has some typos and misspellings in the in-game text. These should be fixed and patches submitted. (For example: when selecting "Fuel" in the in-game "shop," the description is "Allows the tank to move across level terran." — should be "terrain.")

Some programming experience helpful:
I submitted some color palettes several years ago, and one (which I think of as the "clown" color scheme) is very hard on the eyes. Let's update the color palettes to use better-looking colors.

Moderate programming experience necessary:
The color scheme in the game for menus and other interface elements is not great. Yellow on blue for an info box, with black on a green gradient for the in-game "shop"? Let's pick some different colors. At the same time, can we update some of the icons and buttons and spacing around menus and info boxes so things are easier to read?

Advanced programming experience needed:
The game uses a very basic in-game font. It would be nice to modify the game to use a nicer-looking font.

2. GNU Robots
A programming game where you write a program for a simulated robot, then set him free and watch him explore a virtual world. Uses Guile (like Scheme) as an in-game robot programming language

Project ideas:

Some programming experience:
When I wrote GNU Robots, I provided only a few simple demo robot programs, and they weren't very smart. Another developer (Kyle) contributed two other demo robot programs: greedy.scm and mapper.scm. Let's write some better demo robot programs, robots that better demonstrate how to explore the space. Requires knowing Scheme, although a beginner knowledge should be sufficient.

Some graphics experience, no programming:
The game graphics are implemented as separate 16x16 XPM graphic images. These were very basic images that Eric, Tom, and I quickly put together, and always meant to fix later, but never did. If you know the GIMP or Photoshop, let's create some new XPM graphics.

Documentation experience - some programming experience helpful but not required
The Robots-HOWTO documentation is not very easy to read. I wrote it over lunch one day when I was getting ready to make a new release. Let's improve the Robots-HOWTO so it is more helpful to people who want to built GNU Robots, and those who want to write robot programs for it.

Helping others to get started in open source software is very important to me. I have been involved in open source software since about 1993, but I'm probably best known for FreeDOS, which I started in 1994 as a Free software alternative to MS-DOS. I wrote many of the original FreeDOS utilities, and several underlying libraries including implementations of getopt and catgets. FreeDOS is still going strong in 2015, although we have fewer active developers.

I also wrote several other open source programs, including GNU Robots. And contributed to dozens more including gtkpod, Atomic Tanks, GNU Emacs, Freemacs, and Hpcc.

More recently, I help with the usability of open source software. In Spring and Summer, I mentored an internship with the Outreach Program for Women, and Outreachy in examining the usability of GNOME. This Fall, I am teaching an online class at Morris on the usability of open source software, mostly following the model from the internships.

At work, I am the Director of Information Technology at the University of Minnesota Morris.
image: OpenHatch

Wednesday, July 15, 2015

Update on Outreachy usability testing

I wanted to share a brief update on the usability testing project that I am working on with Gina, as part of Outreachy. I am honored to work with Gina this cycle on usability testing, and she is doing a great job.

Gina's usability test will focus on Nautilus, Evince + Characters, Calendar, and Image Viewer. She has assembled a series of scenario tasks that simulate how a person would actually use GNOME and the applications. These scenario tasks have gone through significant revision and are much better representative of typical usage by average users.

This week and next, Gina will lead the usability test, with about twelve test volunteers. I'm very pleased that Gina has developed a script to welcome each tester and explain what the usability test is about. Gina and I also developed a simple form to capture some information about the testers: their age, their experience level, and their technical level. We do this to demonstrate in the analysis that the usability test adequately represents GNOME users.

I look forward to this usability test!
image: Outreachy

Thursday, July 9, 2015

In-person usability testing

I wanted to share this blog post from a colleague at the University of Minnesota-Twin Cities, discussing the recent usability testing they hosted for Drupal, the open source content management system. A few quotes:

U-hosted usability evaluation advances Drupal 8

On the other side of the two-way mirror, the Drupal team of observers were able to see how volunteers’ eyes moved around the screen, where they clicked, and what they typed. Observers also were able to hear test subjects describe what they were doing as they were doing it, and what they liked and didn’t like about the pre-launch of Drupal 8

Best of all, observers were able to discuss what they were seeing real-time. They took notes and, after each session, identified and rated the importance of problems encountered.

In-person usability testing can be very powerful for developers, as it provides them an unfiltered view to how users are actually using their programs. Developers can witness where users are struggling with the interface, what is working well versus what areas need improvement.
image: University of Minnesota

Tuesday, June 16, 2015

Examining the design patterns

I wanted to share a brief update on the Outreachy project that Gina and I are working on, where Gina is preparing for a usability test in GNOME.

So far, we've been in an "information gathering" mode, where she has been learning about some of the basics of usability testing. In our next step, Gina will now start doing an analysis in preparation for a usability test.

As we transition to the analysis mode, let's take a step back. We will look at the GNOME design patterns, and understand what design patterns GNOME uses. The GNOME design patterns are described here:

In a usability test, GNOME will be most interested in how the design patterns are working for people. And to do that, we need to understand which GNOME programs use each design patterns. Having that understanding will help to identify which specific scenario tasks will give the results that are most useful.

At the end of this analysis, we should have an idea which design patterns to examine in Gina's usability test, and what scenario tasks would "exercise" those design patterns. Stay tuned!
image: Outreachy

Wednesday, June 10, 2015

Outreachy week 2 - personas

I am honored to work with Gina this cycle on usability testing, as part of Outreachy and GNOME. We are off to a great start. I wanted to share Gina's excellent description of personas, and how they are used in usability testing.

Personas are an important part of usability testing. Projects that are serious about usability testing need to have a collection of personas that are representative of their users. By using personas, a project can more easily avoid adding features “because it is cool” and instead can discuss new features or interface changes in a user-focused way. “We need to help ‘Stephanie’ … does this change help her?” Or “How does this feature help ‘Stephen’?”

Different projects will create different types of personas. For example, a programmer’s editor like GNU Emacs or GNOME Builder might only include personas for software developers and testers. A graphics tool like GIMP or Inkscape might choose to create personas for graphics professionals, photographers, website designers.

For a general-purpose system like GNOME, which aims to support all kinds of users, defining the personas may be more difficult. You need to consider *all* of the people who would use GNOME.

One way to define personas for GNOME is to break down the users into categories. For example: users of different ages, and users of different skill levels. This presents you with an x-y problem.

I write about this in more detail on my blog, on creating personas.

How you group the ages, and how you group the experience levels, is a project decision. Do you choose the simple case of “beginner/moderate/expert” users? How do you group ages? You could group ages by “generation”: Millennial ages 11-31, GenX ages 31-51, Boomers ages 51-69, and so on. Or you could use elementary-age students, junior high & high school students, college students, post-college ages 22-31, etc.

This gives you a grid in the x-y problem, and you just need to write a persona for each box on that grid:

  • someone between ages 11-31 who is a Beginner user
  • someone between ages 11-31 who is a Moderate user
  • someone between ages 11-31 who is an Expert user
  • someone between ages 31-51 who is a Beginner user

…and so on.

Don’t forget to be inclusive and representative of gender and ethnicity.

But for this exercise in Outreachy, we only need a few personas. Let’s pick an “average” user with “typical” knowledge about computers (not an expert, not a beginner). Gina’s “Mark” persona is an excellent persona to use in this usability testing project. “Mark” will give us a base for writing usability scenarios and scenario tasks that are generally applicable to other users.
image: Outreachy

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.

Customization
  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.
Clocks
  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.
PDF
  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".
Nautilus
  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.
Gedit
  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.
Browser
  1. You got the news that your article was very well rated on the newspaper's official page. Please navigate to the "lemonde.fr" 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 "figaro.fr" 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.
Multimedia
  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.
Software
  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

Monday, April 27, 2015

A brief glimpse into usability testing

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. While this is only a 1-person test, so does not generate actionable results, I wanted to share her results on my blog as a "guest post," as an example for future applicants. This is from Gina, posted with her permission:
This provides the description and results of my 1-person usability test for GNOME version 3.14.2. I set up the test environment on a virtual machine running Debian Jessie, and conducted the usability test with only one participant on February 21, 2015.

When doing usability testing, I strongly believe that understanding the participants is a very important point that we shouldn't ignore. Here, the tester was a 23 year old female student in computer science, who self-reported a medium level of computer expertise.

Test objectives & context

The principal objective of my 1-person usability test was to identify areas in GNOME interface where users may encounter difficulties. Other objectives of this test were to determine if:
  • The proposed tasks can be successfully accomplished
  • The proposed tasks were clear for the user
  • The given explanations clear enough for the user

Test Method

As the participant was not previously familiar with GNOME, I started with an explanation of what GNOME was, and informed the participant about this usability test's purpose. In a usability test, we want to evaluate the user interface and not the tester's individual skills.

Before starting the test, I set some rules, asking the participant to "speak out loud" when doing a task. The participant also agreed to be recorded during the test, and was assured that the data was collected anonymously.

For the usability test, I gave the participant a single sheet of paper containing a list of 23 usability test scenario tasks. The duration of the test was about 30 minutes, including the introduction.

The test results

In order to evaluate the usability test results, I used Jim Hall's heat map technique, presented below. In this heat map, you can see that the participant was able to complete most of the tasks without much difficulty (green boxes), but she encountered some problems in accomplishing others (red boxes). Tasks that the tester was unable to complete are shown in black boxes.

Heat map

The tester was easily able to search for an image in the system and change the screen and the lock screen background. The same happened with the tasks related to the browser, as the tester was already familiar with Mozilla Firefox. The tester was also easily able to play a song and repeat a song in the Music application, the tasks were also quickly and correctly accomplished.

However, during the test, some usability issues were revealed. The tester was not able to complete some tasks like bookmarking a page in a PDF document, or change the name of a bookmark. When testing gedit, the tester was unable to display line numbers in the file or to change the letters of a word to upper-case.

Furthermore, one of most difficult encountered issues was related to Nautilus, where the participant took a long time to discover the option to "bookmark this location". After this option was selected, the tester was unable to locate where the bookmark was saved. Indeed, when her attention was in the top-right corner in order to select the "bookmark this location" option, she did not see that the folder was added on the left-side pane in Nautilus(see screenshot).

Bookmarking a location

Package installation

Another problem that the participant struggled with was the installation of the gparted program. Her first guess was to search for the keyword "install" in the GNOME search bar, but the displayed programs names were not explicit enough to convince her that she was following the right procedure. At first, she started the Synaptic package manager application, but then reacted with "no, this is not the right program". Then, she launched the Packages application, searched for "gparted" program and clicked on "Install Package", but after the button name changed into "Remove package" she thought that the program was installed. When she was asked to verify if the program was installed, she could not find it in the system. It was only after a closer look in the Packages application that she realized that she missed the "Apply settings" button, in the right corner of the window (see screenshot).

Conclusions

For her first interaction with GNOME environment, the tester successfully accomplished most of the basic tasks. However, I believe some of the difficulties in fulfilling the other tasks were due to the user's non-familiarity with GNOME.

Reflecting on the usability test itself, I realized that using a virtual machine with limited performance could have an impact on the test quality. The next time I do usability testing, I plan to use a dedicated machine.

Another uncovered issue was due to my scenario task design: some tasks were not explained well enough, so the tester sometimes had to ask about what a task was prompting her to do. The next time I do usability testing, I will put more focus on the scenario task descriptions.

To improve the quality of future usability tests, I would plan to develop more scenario tasks. For each category of GNOME features, tasks could be classified by their level of difficulty and designed for various types of subjects (for example people familiar with GNOME, or people familiar with Linux but not with GNOME, etc).

This is an interesting first test, although usability testing with only one person makes it difficult to determine if a product like GNOME has good usability.

In conclusion, usability testing can help GNOME to resolve its issues, by using testers' feedback to improve its features. This kind of testing can also help us to understand users and their expectations in order to offer a better user experience.
A few minor edits by me, for style and grammar. -jh

Wednesday, April 1, 2015

ChromeOS getting an update

I was among the first to order when Google released the Chromebook, an ultra-portable low-cost laptop that instantly connects you to the Internet. The idea behind the Chromebook is that we don't really need to store things locally anymore. Instead, we use the Cloud for email, documents, collaboration, video, and pretty much everything we do. So the Chromebook's goal is to get you online as quickly and easily as possible, and connect you to those Cloud services. As suggested by the name, the Chromebook comes pre-loaded with Google's Chrome web browser.

Google's Chromebook uses a desktop environment called "Aura." It presents a somewhat simplified desktop experience, where all applications actually run inside the Chrome web browser. For example, clicking a "YouTube" icon actually launches youtube.com in a new Chrome browser tab. Frequently-used programs can be added to the desktop, or you can browse other applications by clicking the Applications menu icon. Other desktop functions (clock, wireless network connections, battery indicator, etc) are displayed in the lower-right corner. While there is no "bar" or "panel" like in Windows or MacOSX, the Aura desktop appears to do the same by the way it displays icons and desktop functions.

It's no secret that I love the Aura desktop. I find it has good usability! My wife has a Chromebook and loves it. I use a Chromebook at work about half the time, and it's great. The Aura desktop has a simplified look that is both easy for new users and flexible for power users. Aura provides very good usability: The desktop is familiar to both Windows users and Mac users, and the desktop functions more or less like the desktops on these other platforms. Since (almost) everything in the Chromebook runs inside the browser, programs share consistent behavior. The Chrome designers have done a great job of making web apps easy to find and launch, and settings easy to search and update.

Overall, if the Aura desktop were available on a "stock" Linux distribution and had the ability to launch local programs like LibreOffice or a terminal, it would be a great desktop for most folks.

So I was particularly interested to read an article recently from Hot Hardware that ChromeOS is getting a makeover with material design and Google Now support. I really should update my Chromebook at work to use the Beta channel, so I can try it out.

As reported by Hot Hardware: "New in this version is Chrome Launcher 2.0, which gives you quick access to a number of common features, including the apps you use most often (examples are Hangouts, Calculator, and Files). Some apps have also received a fresh coat of paint, such as the file manager, seen below. Google notes that this is just the start, so there will be more updates rolling out to the beta OS as time goes on."

And here are the screenshots:



It's hard to make a heuristic usability evaluation based on two screenshots, but I think I can make a few fair comments here:

As always, I like the clarity in the presentation. Even though Aura doesn't use a traditional "menu bar" or "application bar" like GNOME's top bar or XFCE's launcher, it's easy to see how to launch different applications. The first screenshot shows a number of GNOME Apps icons, and I only have issues with a few of them (Google Calendar's icon looks like a shopping bag to me, for example). In the second screenshot, you can see icons for Chrome and Files. In the lower-right, you can find the clock, wireless status, and battery. Overall, the icons are clear and accurately represent the action.

I love the clearly defined window "tab" in the Files app. When the app is in "windowed" mode, it is a convenient place to "grab" the window to relocate it, and provides icons to minimize, maximize, and close the window using standard icons.

The Google Now screenshot provides only content, so I'll focus on the second screenshot instead. The Files app provides a basic menu bar that I find quite usable. There's a clearly define "breadcrumb" navigation trail in the upper-left, and the upper-right has a search menu and an application menu. I dislike the mixed use of the "three lines" menu with the "three dots" menu. I don't know what each of them does. But overall, this is very clear.

I also appreciate the bright, happy colors used in Aura. No dark, moody colors here. Aura's use of bright blues at the top of the windows would likely reflect feelings of "sky." Especially so because the blue is limited to the top of the screen.

But oh my—the wallpaper! The wallpaper uses muted colors, but is still garish. I don't know if I should blame Google for this (was it the default desktop wallpaper?) or the reviewer (did they pick this particular wallpaper?) but either way, I would have preferred a happier, calmer image.

I'm pleased to see this example of good software usability. Although Aura isn't open source software,My bad. Aura is open source. See comments, below. -jh it's important to note positive examples of usability so we can learn from them: what worked well, and what could be improved.
Chrome icon: Wikimedia
screenshots: Hot Hardware