post written by iLab Southeast Asia Software Developer, Kengsreng Tang
InSTEDD has an entire platform of free and open source technologies that help people quickly share valuable information around health, safety and development issues. Resource Map is one of the tools that we’ve developed that works either through the web or through SMS.
Resource Map is an application that allows users to geographically map their resources so that they are always aware of what they have currently and what they need more of. Users can update, query, receive alerts from the system and more simply by sending an SMS or updating the website online.
Resource Map is an application that allows users to geographically map their resources so that they are always aware of what they have currently and what they need more of. Users can update, query, receive alerts from the system and more simply by sending an SMS or updating the website online.
 |
| Click to go to the Resource Map Website: http://resourcemap.instedd.org/ |
How User Experience Design Creates Better Products
We created Resource Map because we needed to create an easy to use system that users felt comfortable with and that provided real value to them. In order to achieve this, it was important for us to work closely with the users and continually test the design in order to make sure it was both useful and usable to the user. We use the terms UX and UI to describe this process:
User Experience (UX) Design: a term used to explain all aspects of a person’s experience with the system including the interface, graphics, industrial design, physical interaction, and the manual. It also refers to the application of human-centered design practices to generate cohesive, predictive and desirable designs based on holistic consideration of users’ experience.
User Interface (UI) Design: a term used to explain the visual interface that the user actually interacts with when using a given system. UI design deals with the specific user interface(s) of a product or service. The UI can be a component of UX, but many user experiences don't have UIs. The design of a UI will be heavily informed by the UX design. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user centered design or “human-centered design”.
Simply put, UI us what people use to interact with a product (i.e. website) while UX refers to how they feel when they use it. Here’s a short video that explains these concepts a bit more: http://www.youtube.com/watch?v=Ovj4hFxko7c&feature=related
In essence, we attempt to uncover how the user feels when using the product. Are they excited? Are they confused? Are they able to do what they intended to do or do they get stuck? The goal is to observe how real users experience and interact with the system so that the creator can remove any pain points and improve the usability. User experience is subjective in nature because each person’s feelings are unique. User experience is dynamic and changes over time as the circumstances change.
 |
| One example of an insight we identified based on how we saw the users interacting with the system |
UX/UI Research for Resource Map
Earlier this year, I had the pleasure of conducting the initial UX research with some of the team here at the iLab Southeast Asia. The very first thing we did was create a user interface design composite so that we could show users what it would actually look like to add layers (i.e. resources) and fields (i.e. values) to the Resource Map they create.
One of the best things (and one of the most challenging things) about working at the iLab SEA is that we experiment a lot. We believe that experimentation is essential for innovation. In order to create the UI for the user to interact with, we used a tool called GIMP (GNU Image Manipulation Program). This was a challenging tool for us to use because it is an open source editor that we didn’t have experience using before.
Earlier this year, I had the pleasure of conducting the initial UX research with some of the team here at the iLab Southeast Asia. The very first thing we did was create a user interface design composite so that we could show users what it would actually look like to add layers (i.e. resources) and fields (i.e. values) to the Resource Map they create.
One of the best things (and one of the most challenging things) about working at the iLab SEA is that we experiment a lot. We believe that experimentation is essential for innovation. In order to create the UI for the user to interact with, we used a tool called GIMP (GNU Image Manipulation Program). This was a challenging tool for us to use because it is an open source editor that we didn’t have experience using before.
 |
| The UI design of Resource Map that we used for the usability tests |
Since Resource Map wasn’t ready to be used online at that time, we designed the UI composite and printed it out on paper. During the usability tests, we paid very close attention to how the users behaved, as well as asked them questions about their experience such as why they chose to click a particular link or go to a particular page and how they felt when they actually did it. By asking these sorts of detailed questions while the experience is still fresh in the users’ minds, we are able to obtain crucial information to help us improve the usability of the design. Going through this process gives us an opportunity to collect data that we can use to carefully analyze and redesign the UI composite in order to make it better. We continued this process, with multiple groups of users, until we were able to get over 80% of them feeling comfortable and confident about how to use the tool. Once we reached that point, we were ready to move on to the next step of actually implementing the design in code.
Click this link to see some images to our actual design process:
Click this link to see some images to our actual design process:
 |
| iLab SEA developer works with a user from the Cambodia National Malaria Center to test Resource Map |
Long Term Learning
Although each tool is different, and UX/UI testing needs to be continually updated, the process has taught me a lot about what it is like to experience something for the first time again. I have spent a lot of time learning about the attitudes of our users which gives me some insight into why users think certain things or how they understand our intentions. Working closely with users has helped me to analyze and design UI composites much quicker than before.
UI testing is a very important step in creating good web applications that are intuitive for non-technical people to use. If the tool is easy to use, then it also means that less time and energy and resources need to be put towards training people on how to use the system.
Good design is not just a “nice to have”, but it really is a “must have”, especially when we work in environments where the stakes are so high. Public health and disaster workers deserve the absolute best and it’s part of our responsibility to deliver the highest quality tools to them. Our role at InSTEDD, and the iLab SEA, is to help our users do more with information so that it helps them to do their jobs better.
No comments:
Post a Comment