A Guide to User-Centered Design
This article is a reflection on my semester of HCI as a whole and how it has shaped and influenced my design philosophy.
What is Human-Computer Interaction?
Before we get into my experiences, I want to give you a brief background on what HCI is and how it connects to User Experience (UX). Human-Computer Interaction is a multidisciplinary practice that focuses on both the interaction between the user and the computer as well as the design of the computer interface. As its name implies, HCI consists of three parts: the user, the computer itself, and the ways they work together.
User
By user, I mean an individual user or a group of users working together. An appreciation of how people relay information through sight, hearing, and touch is vital. Also, different users form different conceptions or mental models about their interactions and have different ways of learning and keeping knowledge.
Computer
When I say computer, I’m not just talking about your desktop computer. I’m referring to any technology ranging from smart watches to virtual/augmented reality. You’re probably aware of how much smartphones and tablets have paved the way for tons of new and unique interactions between humans and computers. The potential of these new types of interactions is absolutely huge but we’ve still got a long way to go before they become truly useful and usable.
Interaction
There are obvious differences between humans and machines. In spite of these, HCI attempts to ensure that they both understand each other and interact successfully. In order to achieve a usable system, you need to apply what you know about humans and computers and consult with your users in order to understand their needs. This, in turn, will help you deliver a product that is efficient, effective, and enjoyable to use.
The Value of Human-Computer Interaction
HCI is a broad field which overlaps with areas such as user-centered design, user interface design and user experience design. In many ways, HCI is the backbone of UX. The practical considerations for products that UX designers concern themselves with have direct links to the findings of HCI specialists about users’ mindsets. This collaboration helps designers to drive impactful changes in the market and society.
Understanding the user through UX
User experience is how you feel about every interaction you have with what’s in front of you at the moment you’re using it.
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
Great user experience design not only highlights and promotes your product, but it has also become a key part of building and growing customer confidence. There’s a lot to consider if you want to understand the full user experience, and Peter Morville breaks it down beautifully with his UX Honeycomb:
The honeycomb hits the sweet spot by serving several purposes at once. It is a great tool for advancing the conversation beyond usability and for helping people understand the need to define priorities. Is it more important for your product to be desirable or accessible? How about usable or credible? It all depends on your unique balance of context, content, and users.
With all of this in mind, the primary factor of success ultimately lies in the fact that you keep your user in the center of your design process. This approach allows you to create designs that are clean, simple, intuitive, flexible and engaging, and provide a WOW experience to your users and thus differentiate you from your competitors.
My Design Process
In order to create these multifaceted designs, you must have a well-structured design process. This is usually an iterative method that helps you continuously improve and polish your designs. In the process, you go through different stages repeatedly while evaluating your designs on each stage. Each stage involves relevant stakeholders in your organization that take part in the process to make your products highly efficient and usable.
My process consists of six stages:
Understand
In order to provide a viable solution, you first need to understand the problem. This stage is for conducting initial brainstorming sessions to get input on the problem and gain a better understanding of its requirements.
In this brainstorming session, our primary focus was figuring out which data to present and how to present it in a way that users can look at it quickly and learn something impactful from it.
After several of these sessions, we had successfully identified the general goals and constraints to which our visualization must adhere to and determined criteria that will be used to assess the value of each of our proposed solutions. These parameters are vital since the direction of the product is highly dependent on how these are defined and respected.
To take this stage one step further, you can conduct user interviews. My advice is to follow industry standard user research methods and conduct contextual and individual interviews. We learned how to carry these out from Andy Ko, an HCI professor at the University of Washington and Emmett Shear, founder and CEO of Justin.tv and Twitch. This knowledge about users and their environment helped us to provide a clear direction for our designs.
Research
Research is the next key step for designing a great user experience. Design teams do research to explore how the world is working on similar products/experiences. Product Designer Sherif Amin called it the UX Competitive Analysis. He listed three purposes of this analysis:
- Understand market competition
- Learn about your domain
- Get inspirations and ideas from your competitors
Knowing who your competitors are, and what they are offering, can help you to make your products, services, and marketing stand out. Since all of our products were prototypes/proof of concepts, we did not need to do this step. If we wanted to monetize our products, then this step would be crucial.
We also need to keep an eye on the latest UI trends, design principles, and existing user experience guidelines. To do this, we frequently visited Medium, Sidebar, and Laws of UX. Sidebar is a resource that collects the best links about UI design, typography, CSS, user research, and all other facets of design. Laws of UX, on the other hand, teaches maxims and principles that designers consider when building user interfaces.
Fitt’s Law
The time to acquire a target is a function of the distance to and size of the target.
More specifically, make elements you wish to be easily selectable large and position them close to users. This law especially applies to buttons.
Hick’s Law
The time it takes to make a decision increases with the number and complexity of choices.
The more choices a user has, the longer it takes them to think about these choices and make a decision. You can simplify the choices for the user by breaking complex tasks into smaller steps.
Jakob’s Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
You can simplify the learning process for users by providing familiar design patterns.
Law of Prägnanz
People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.
We like to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information.
Law of Proximity
Objects that are near, or proximate to each other, tend to be grouped together.
The law of proximity is useful by allowing users to group different clusters of content at a glance.
With all of these sources in mind, we were able to start thinking about possible layouts and options to provide the best user experience.
Depending on what your product is, a mood board can be a great way to kickstart your design process. Mood boards are a collection of images, colors, typography, and other guidelines to help express the desired aesthetic of a product. They can be helpful in conveying visual ideas using other visual elements. Often the elements complement each other in some way, such as color or style. You don’t necessarily have to use everything you put in the board but it is a great way to give direction to your product before you start designing. Below is a mood board that I created for my senior design course.
Sketch
This stage involves brainstorming required UI features, drawing paper sketches, whiteboarding workflows, and creating low-fidelity wireframes to share your ideas with stakeholders. This stage itself is an iterative process.
“Designing is not something that you just create and start using. Draw and draft and redraw and redraft, thus creating an unmatched experience.” — Anonymous
A great place to start is to come up with “user journeys” for your product. A user journey is a series of steps which represent a scenario in which a user might interact with the product you are designing. These can take the form of simple phrases like “As a user, I want to…” or as flow charts. User journeys can help you work out what users will expect from your product. By understanding these key tasks you can start to think about what sort of functional requirements you will need.
With this, we began to think about our information architecture which focuses on organizing, structuring, and labeling content in an effective and sustainable way. Once we had a concrete plan, we began to sketch our initial designs. The idea is to not focus on minute details but instead create a multitude of designs with hopes of taking features from each one to combine them and form something better.
If you’re creating an app, I would recommend using a design/prototyping tool like Sketch, Figma, or InVision Studio to redesign your sketches as wireframes. Wireframing is a great technique that allows you to iterate quickly with little cost to time or energy. With low-fidelity wireframing I did not focus on specific design details like colors, icons, fonts, etc. but instead tried to create a clean “block-level” design to demonstrate big picture ideas.
It is extremely important to get feedback in these early stages because iterating on a high-fidelity prototype takes much more time than iterating on low-fidelity prototypes. I obtained feedback mainly from my team through InVision Freehand. With Freehand, my team can quickly plan, create, and discuss feedback from the wireframes.
Throughout this process, we continued to keep the principal goal in mind — make a usable design to achieve end-user satisfaction.
Design
At this point, we had finalized the layout and flow of our interface. The next step was to work on final graphics. This stage is important for turning your initial mockups and wireframes into an aesthetic prototype with common themes and styles. The basic characteristics of prototyping include:
- Visual design: Realistic and detailed design — all interface elements, spacing, and graphics look just like a real app or website. Everything in this design form looks clean, sharp, and intentional.
- Content: Designers use real or similar-to-real content. The prototype includes most or all of the content that will appear in the final design.
- Interactivity: Prototypes are highly realistic in their interactions.
Depending on the scope of the product, developer handoff would be the last segment of this stage. This means preparing and sharing design specifications (principles, guidelines, colors, typography, iconography) to the development team. Reducing friction during this process is critical but luckily with InVision, the process is simplified and streamlined. Developers can inspect specifications and even view snippets of generated code that may serve as a useful reference while they’re implementing the design.
Implement
Since technical individuals participate in the early stages of the process, they can start implementation while the design phase is in progress. The development team builds back-end functionality first and connects it with UI when they get design artifacts. It is better that the design team is involved in this step to help with the development phase. This is because during implementation, minor design changes are sometimes needed in order to adhere to technical abilities and constraints.
Evaluate
When product features are implemented, the end product is evaluated based on a few factors:
- Is the system is usable?
- Is it easy to use for the end-user?
- Is it flexible and easy to change?
- Does it provide the desired solution to user’s problems?
- Does the product have the credibility that makes someone want to use it because of the experience it provides?
“The design team validates the product in terms of user flow and experience and identifies areas where improvements are needed.” — Saadia Minhas, UX Designer at UX Design World
It is important to ask yourself these questions. You’ll want to conduct more user testing at this stage to help you answer a few of them. Live demos and structured questionnaires make it easy for the user to give you genuine feedback on your product.
User test for our VR zombie game.
For our questionnaire we used a system called “I like, I wish, and what if?” I like is some design choice or feature that the user liked during the testing. I wish is something that might be infeasible that the user would like changed. What if is a feasible change that the user believes should be implemented.
Another great way to evaluate your solutions is Jakob Nielsen’s 10 Usability Heuristics for interaction design. This will help you identify usability problems with individual elements and how they impact the overall user experience.
After this last stage, the process should iterate. Depending on the required changes, you may have to go back to Research, Sketch, or Design several times. This process will continue until the desired experience and customer satisfaction is achieved.
Reflection
Looking back I realized there were some things that I wish I could have done differently. The biggest aspect of my design process that I did not pull through on was the evaluate stage. It is really important to get constant feedback from users and most of the time my team waited until the very end to get it. It is hard to iterate when projects are only two weeks long. Done correctly it would have helped us to better understand the needs and wants of our users. Unfortunately, prototyping and refining took longer than expected and we had to move forward with what we had. Skipping this stage is not recommended it did hurt our final product in the end. Thus, our solutions may not have been the desired ones and may not have helped our users in ways that we have hoped but it was the best we could do with the time and resources that we had.
Although I had some challenges throughout the semester there were somethings that I found easy and rewarding. Since I come from a UX background I was very comfortable managing the development of the prototypes. I will be working in UX this summer so to be able to work on my industry skills during HCI was outstanding. I also thought brainstorming ideas for solutions came naturally to me and every team that I worked with. Everyone had their own spin on things but when push came to shove we could always come to an agreement. It was extremely rewarding to see our solutions come together after devoting several weeks to them. I am really happy with the direction Professor Evan Peck took with our class, as we were able to create some really cool things.
