User Interface and Interaction Design –an Iterative Process, a Series of Tests and Improvements

9 min readNov 20, 2016

You might have heard some people say that the user interface interaction design of an app is the easiest thing in the world. Do you really know what it takes to have an app that anyone could use? If you think you know it all, you may stop reading, now. If you are like most of us, who always want to learn more, especially from other’s experiences, keep on reading about what I learned during the capstone project of the Interaction Design Specialization by University of California, San Diego, via Coursera.

Find a problem to solve

One cannot design without a problem at hand. The one I took on was the family calendar I saw on the wall at my friend’s house. There is no need to comment on the bad handwriting, the crossed over items, the multiple colors and the fact that it is hard to know if anyone made a change until you got home.

Define Point of View (POV) to Anchor the Design

Brainstorming about her [the user’s] needs resulted in a long list. It was challenging to go deep and think of the real need while I was looking at the image. The first few items that came to mind were purely based on what I was seeing.

· She needs to keep track of her family’s activities and appointments.

· She needs a way to easily make changes to the family calendar of events.

· She needs a way to keep track of the changes in her family calendar without creating a mess.

· She needs to see at a glance when each of her kids has an afterschool activity.

· She needs to see the individual events/appointments for each family member.

· She needs to see the family daily activities at a glance.

· She needs to see the family weekly activities at a glance.

So I closed my eyes and asked myself, why did she start doing this in the first place? What was she trying to achieve? The answers came after a relatively long moment of silence…

· She needs a way to communicate the family schedule to the rest of her family.

· She needs an easy way for everyone in the family to understand the schedule. (Her boys are in first grade)

Those two needs determined the Point of View (POV) to anchor the design around.

· Keeping track of my dynamic family live shouldn’t be a hassle. My kids should easily
understand their appointments (sports, music, doctor, arts.)

· Knowing when our busiest days are should be easy.

Storyboard to Clarify the Goal

Having a problem to solve and a point of view (POV) naturally leads to thinking about how will this new and amazing app be used. Here comes the storyboard. Drawing the interaction someone will have with the app in a particular scenario while solving their problem makes it a bit more real.

The storyboard is not meant to be a piece of art. It is meant to tell, as its name suggests, a story. The storyboard is like a comic strip, relating the main message in a very few frames. The one above highlights the app features whose design journey is described below. It is not a complete list of the envisioned features or app capabilities.

Prepare a Paper Prototype

The next step in turning the idea in reality was to create a paper prototype. Based on the POV and the storyboard I draw the way the app screens will look like. This first prototype had a lot to be desired on the beautification side, but now I could “play” with my app. I could verify if there is enough information on the screen to answer the user’s concerns and pending questions:

Q: How would you know what is the busiest day of your week?

A: You’ll pull up the current week and identify this at a glance. The icon indicating the day’s business will tell you this at a glance.

Q: How would you tell what events are in a given day?

A: Click on the day. Even these who cannot read would recognize the image related to each event.

But it wasn’t good enough yet. Even though there were visual indicators, to tell at a glance which one is the busiest day of the week, the daily calendar was missing an option to delete an event and there was no way to go to the previous page or the previous or next day or week.

It was time for analyzing, improving and rethinking of the approach. I made a few improvements to the prototype like adding a page header to help with the navigation, an option to delete and add an event and moved on to the next step.

Test — Perform Heuristic Evaluation

Following the “10 Usability Heuristics for User Interface Design” by JAKOB NIELSEN https://www.nngroup.com/articles/ten-usability-heuristics/ other students from the class evaluated my prototype as I evaluated theirs. Regardless of the updates I’ve made between the original version and the one they tried during the evaluation, a list of issues were discovered.

*The paper prototype used during the heuristic evaluation session.*

The feedback I received indicated that my prototype needs rework in a few areas:

Summarized Issue 1. On the color and image assignment concept, used on the event add/edit page. Even though both are at its core, a valid scenarios that should be addressed is the case with large families and when each parent takes one of the kid to their event that are at the same time.

Potential solution

Consider using patterns in addition to colors. That will increase the number of option.
Consider using pictures of the family members. These could be pulled from their Facebook or Google+ avatars if the application allows login that way
Alternatively could go with the family member’s names or combine them with the color representation.
Need a variety of simple images representing the typical events in a busy family’s life. Initial list could be: Doctor’s appointment, Dentist’s appointment, Car maintenance, Birthday, Soccer, Gymnastics, other sports, Piano, other music and other after school events

Summarized Issue 2. On the display of the daily events each event should have start and end time, location, image and color. Gaps in the schedule should be shown as well and all that may be difficult to fit on a phone’s screen.

Potential solution

May have to provide a summary of the events with start and end time using the color assigned to the participant, followed by a “peek” into the details without going to the screen where the details of the event are shown.
Have to consider scrolling as the possible time slots during the day won’t fit on one page completely. Even the apple calendar scrolls when you look at a single day.

Summarized Issue 3. Screen layout and navigation

The delete button represented as an encircled minus was misunderstood.
The main menu button represented as three horizontal lines was misunderstood.

Potential solution

Consider using words instead of icons to represent the delete and main menu button.
Alternatively have the option for the user to switch between the icons and words in all buttons. That will cater for users from different generations.

During this evaluation a whole flow was skipped because that user didn’t venture to “click” a “strange” icon on the prototype and that created a limited impression of what actually the prototype could do. Being the one evaluated I made the note that the icons used should be improved or replaced by words. The Heuristic Evaluation showed me firsthand how some people prefer icons, others words.

One limitation of the Heuristic Evaluation that I found is what could be represented on paper compared to what could be actually coded or developed later. For example: A paper pull down list may look better than the final version that may really have usability issues introduced during the implementation phase or vice versa.

All that said the Heuristic Evaluation was a great tool to catch usability issues of all kinds early on. If my work wasn’t for educational purposes, having such issues identified and corrected at the paper prototype phase will save money, speed up the delivery of the final product and ensure better usability and quality of the application.

Improve — Wireframes and Prototype Testing

Armed with the feedback from the heuristic evaluation I started working on the wireframes. After plugging the wireframes on the Invision site (https://www.invisionapp.com/) I added some basic navigation and was now holding the first working prototype of my app. Very excited and with trembling hands I asked a few friends to try it, warning them that to all buttons work as it is not a real app yet.

And Test Again — Usability Testing

The participant signed a usability test consent form and accomplish a few tasks that would walk them through the few of the app areas that needed improvement based on the heuristic evaluation results.

· Identify your family’s busiest day for the week.

· Add a weekly soccer event for Saturday 9/24/16.

· Delete all occurrences of that event.

· Set your default home page.

· Change the color for Tom.

Knowing that they are evaluating the app and its design and not me, helped the participants talk freely. One of them tried the interface on a smart phone while the other accessed the smartphone simulator via a touchscreen laptop.

Participant’s comments

There is too much detail on the daily screen for each of the events, especially when there is more than one participant. It is too hard to read on the phone screen.
The images are a nice touch
Colors simplified the at a glance identification of the busiest day and event participants
For color-challenged users the event participant’s names should be bolded and the colors used by the app should be rendered differently in the gray scale.

Improve — Prepare for the Next Test

There were plenty of changes and quite a few iterations of user review and testing. It was time to finalize the approach for the most “criticized” and “confusing” page. It was obvious that something wasn’t right. Was it the colors, the icons, the images, the layout? There are so many elements, which one could have been the reason for the user’s comments. And there have been so many updates made to it.

The difference between A and B was the level of detail presented on the daily events screen.

And Test Again — A/B Testing

One of the main questions, for the participants in this testing, was whether the information presented on the daily activities screen was adequate. I was curious if the test participants would prefer the more detailed version with the event name and location or the one with only the event start and end time and the participants.

The users had to add a weekly recurring event — soccer game for Tom and Dad from 1 to 2 pm at the school stadium. This was meant to test the approach and controls on the add/edit screen. All participants successfully completed the task and thought it was easy. One of them pointed out a few inconsistencies between the approaches for the addition of event name vs participants. The first one was done by tapping in the box while for there was a button for the addition of the participants. That led to yet another improvement — the search button there was removed..

The approach towards the deletion of event was questioned by the participants as well. This was interesting as the screen tested was a result of the heuristic evaluation. Based on the user testing input I removed the delete icon and added a delete after a slide to the right.