Asynchrony Solutions Blog

One Way To Conduct a Usability Study

by nikirae on March 3rd, 2011 at 2:54 pm

We knew usability was going to play a big role in the successful release of version 1.6 of an ongoing software development project. What we weren’t sure of was when we could schedule a formal usability study with the product end users. Fortunately, we were able to plan, conduct, and analyze the study prior to the product release.

The first thing we did was look over the feature list we had slated for the release to select which features we wanted our study to focus on. We ended up choosing five features that were prioritized high in the list

The usability study would consist of two formative usability tests on paper prototypes, a summative usability test on part of the application that was slated to get some major enhancements, and two user interviews on features that were completely new to the system. We had one hour to complete the study with each of our nine subjects over the course of three days, and only one week to prepare the paper prototypes, usability test scripts and interview questions.

When we arrived at the scheduled location, we had everything in place for a successful usability study. Our end users were each on one of the three teams that used the software application. To determine which users met the initial criteria for each part of the study, we conducted an introductory interview consisting of five yes or no questions. Based on their answers, we reordered our study protocols to match up with their team duties so we could focus on the features most relevant to them first, in case time didn’t allow for us to go through each of the protocols.

During each of the studies, two Certified Usability Analysts alternated between administering the study and taking notes. This allowed for us to both keep our energy up and momentum going over the next three days. During the usability studies, we took notes directly on the protocols we had printed out. After each one-hour study, we had time allotted to combine our notes and type them up, highlighting interesting things that our subjects said or did along the way.

It was a very long three days, but all of our end users showed up on time, and we ran most of the protocols with at least five subjects, so we had a good sample. When we returned back to St. Louis, we analyzed the test results and came up with a list of actionable items to deliver to the development team.

Since we already had the studies for all nine subjects transcribed, compiling the results wouldn’t take too long. During the test, we assigned each task a user attempted with a rating of 2 for completing that task without errors, a 1 for completing the task with some errors along the way, or a 0 for not completing the task. We took the average rating for each task and created a bar graph. From this graph, it was easy to see the tasks that had an average rating of 1 or lower, which we considered critical and should be addressed immediately. A written summary based on the rating, that stated what percent of users completed the task and with or without errors, was included with each task as well.

We looked through the transcripts for each of the users, pulling out those comments we flagged as interesting and added them to a master file that included the original tasks or questions for reference. These interesting comments were included a single time for each user, so sometimes there were duplicates which helped us see trends in how users were interacting with the application. The comments could imply solutions to making the task more usable or just provide insight into what our users were expecting.

After our results document was complete, we delivered it to the project manager and started creating the list of actionable items that would increase usability for the tasks our subjects struggled with the most. Regardless of how well the software works, we know the results of this study will improve how well the user works with the software.

Tags: agile, design, UCD, ui, usability

How to Reuse UI Components Using XML Layouts and the Inflater Service

by Matt Todd on February 28th, 2011 at 3:46 pm

Creating UI components for Android apps programmatically is difficult.  So, the Android framework provides a way to create UI components via XML.  The Eclipse Android SDK actually provides a tool for creating these XML UIs via drag-and-drop/WYSIWYG.  Now developers must manage XML documents along with their Java code, which can also be difficult.  To help alleviate some of these difficulties, the Android framework allows for reusing the XML views via the Inflater Service.

First, let’s define some UI components in XML.

The first XML layout will be the main layout that will be the base of the UI shown to the user. This could also be reused for all the screens as it is just an empty LinearLayout.

res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/main_layout" android:orientation="vertical"
          android:layout_width="fill_parent" android:layout_height="fill_parent">
     <TextView android:text="@string/title" android:layout_width="fill_parent"
               android:layout_height="wrap_content" />
</LinearLayout>

The second XML layout will be used for some text fields for a simple form.

res/layout/personnel_form.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical" android:layout_width="fill_parent"
          android:layout_height="wrap_content">
     <LinearLayout android:orientation="horizontal"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content">
          <TextView android:text="@string/firstname_label"
               android:layout_height="wrap_content"
               android:layout_width="wrap_content" />
          <EditText android:id="@+id/firstname"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" />
     </LinearLayout>
     <LinearLayout android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content">
          <TextView android:text="@string/lastname_label"
               android:layout_height="wrap_content"
               android:layout_width="wrap_content" />
          <EditText android:id="@+id/lastname"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" />
     </LinearLayout>
</LinearLayout>

The final XML layout will be an OK and Cancel button that could be reused for a number of other screens.

res/layout/buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_height="wrap_content" android:orientation="horizontal"
          android:layout_width="fill_parent">
     <Button android:id="@+id/ok_button" android:text="@string/ok"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" android:layout_weight="1" />
     <Button android:id="@+id/cancel_button" android:text="@string/cancel"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" android:layout_weight="1" />
</LinearLayout>

Now we get down to obtaining and using an instance of the Inflater Service in the Activity.  To do this, we simply use the getSystemService() method giving it the name of the Inflater Service.

LayoutInflater inflater = (LayoutInflater) context.
     getSystemService(Context.LAYOUT_INFLATER_SERVICE);

Once you have an instance of the Inflator Service, you can call the inflate method giving it the XML layout that you want to use and the root view that you want to append it to.

LinearLayout mainLayout = (LinearLayout) findViewById(R.id.main_layout);
inflater.inflate(R.layout.personnel_form, mainLayout)

And finally putting it all together, here’s the Activity…

public class MyTestActivity extends Activity {
     @Override
     public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);

          LayoutInflater inflater = (LayoutInflater)
               getSystemService(LAYOUT_INFLATER_SERVICE);

          LinearLayout mainLayout = (LinearLayout) findViewById(R.id.main_layout);
          inflater.inflate(R.layout.personnel_form, mainLayout);
          inflater.inflate(R.layout.buttons, mainLayout);

          Button okButton = (Button) findViewById(R.id.ok_button);
          okButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                    EditText firstNameText = (EditText) findViewById(R.id.firstname);
                    EditText lastNameText = (EditText) findViewById(R.id.lastname);

                    String message = "Hello, " + firstNameText.getText() + " " +
                         lastNameText.getText() + "!";
                    Toast.makeText(MyTestActivity.this, message, Toast.LENGTH_LONG).
                         show();
               }
          });

          Button cancelButton = (Button) findViewById(R.id.cancel_button);
          cancelButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                    MyTestActivity.this.finish();
               }
          });
     }
}

Using this technique, you will be able to reuse portions of UI components for various screens in your Android application.

Tags: android, development, java, ui, XML