Design Manifesto: Main Learnings from my Human-Computer Interaction Course

Galaan Abdissa
HCI with Galaan
Published in
10 min readDec 3, 2020
Source: University of Canterbury Website

Human-Computer Interaction, HCI, whatever you like to call it, has been a growing field of research as technology becomes intertwined with every aspect of our society. Whether it’s in your home, at school, at work, et cetera, computers and technology are present in ways that are intended to enhance the human experience. However, that power shouldn’t be taken for granted. As computer scientists and developers, we are always striving to design and create new products for people so understanding how humans and computers interact is fundamental to that process. Often times, the design process is overlooked but a full semester of my Human-Computer Interaction class taught me important advice applicable when making marketable tech products used by everyday people. Here are some of my learnings from this course and let them serve as inspiration when developing the next technology.

1. What is the human problem that you are trying to solve?

As a developer who is attempting to solve a problem, awareness of your users and the problem at hand should be your priority. Designing for living beings who plan on using your technology to better their day-to-day experiences is important thus finding that small or major human problem that hasn’t been addressed with software is key. However it is easier said than done and it could be difficult to fully contextualize yourself in an environment that you aren’t aware of. That is why doing prior research or working with experts in their respective fields only betters your product and its value to the users that will use it. In a published book by the University of Washington, Amy J. Ko author of How to understand problems and How to define problems, discusses the process in which a designer of a product can learn about their users and what steps can further their knowledge. This idea of contextual inquiry is important especially when you make sure a design doesn’t actually hurt your users in their specific environment. Chimamanda Ngozi Adichie conveys in the TedTalk the harm that can be caused from the ignorance of knowledge even when though that wasn’t the intent of the agent.

Furthermore, a problem doesn’t have to encompass a general group of people but rather a niche audience that needs a solution. Often times, the best solutions are those specific solutions that completely addresses the needs of their users without the distraction of a general base.

“Because everyone’s problems are personal and have different causes and consequences, there is no such thing as the “average user”. Every single solution will meet some people’s needs while failing to meet others.” — Amy J. Ko

In addition to understanding the problem, defining and delivering a clear, data-driven argument for why the product you are building best suites the need of an audience strengthens your overall support. Recognizing consistent patterns within your audience and identifying behaviors that can optimized will further persuade your users for why the product you are building is beneficial to them. As a designer, use cases are fundamental when mapping out all the scenarios the user would encounter with a product and how it will address the prevalent patterns that exist.

When developing one of our HCI projects, my team and I realized the importance of understanding and defining a problem when redesigning a website for a local non-profit for a specific user group: teenagers. Not being too old from the group we were assigned, we had preconceived notions and assumptions about who we were designing for and what they expected on a website. In addition to teenagers, the goal for the project was to address domestic violence and provide resources to local middle schools and high schools. We understood the importance of undergoing research for our user demographic so we looked through existing teenage websites to get a feel of what type of design would best emphasize our message. After extensive research and compiling a mood board (pictured below) we were able to design a prototype of a website that was useful and appealing to our user base.

Mood board from our needs-finding research

In addition to the mood board and competitive research done for this project, another project that I undertook was researching bad designs that exist even at my school. Looking and learning through bad designs only reinforced the problems that most developers face: building for output versus experience. Having a functional product at the end is important and every engineer plans on having a functional product however the poor user experience can disappoint your audience and make it even harder to get the desired solution. This was evident when looking at Bucknell’s current message board design on mobile websites. The lack of explanations for categorized content and small display called for a redesign and a viable product that redefined the design problem.

Display of the message board on mobile websites

This learning of understanding and defining the problem was a big step forward when developing future projects in future mediums and as someone who’s been given feedback and advice to improve on these learnings, I recommend to understand and define the problem ahead of time before any building takes place. This will save time, energy and such resources especially as you undergo the extensive development and iteration phases.

2. Brainstorm and always sketch out design prototypes

Once you have a solid foundation of the problem you are trying to solve, the next step is to brainstorm and create mockups of the prototype. Mockups, including sketches are a great, low fidelity investment, that will help when visualizing the user experience before putting time and resources into building the actual product. You don’t have to be an artist but being able to ideate and show what you are thinking of building before actually building it is powerful in the long run.

In the project mentioned before, our team for the non-profit website redesign went through phases of sketching and brainstorming how the user journey was going to play out on the website. Using just paper and pencil and later wireframes on Adobe XD, our team was on the same page when it came to what exactly we wanted to deliver on the design front.

Sketch of the non-profit website redesign

Again, none of us were design experts so we referred back to articles and readings from class about how to design interfaces. Whether it was the layout of the page, the elements of the user experience, or the visual design choices being made, we realized it was important to put the user first in these decisions and to deliver a product that primarily addressed the problem without any extra business. Sketching actually accelerated our design phase when using prototyping tools like Adobe XD.

Images of 2 pages on our Adobe XD prototype

After reading more about how to design interfaces, we learned that some of the best solutions out there have a simple and easy-to-use interface that makes users love them. A prominent example of this is Google and it’s homepage where there only exists 3 main functionalities: the search bar, the search button and I’m feeling lucky button. Inspiration from an application like Google’s interface made brainstorming and sketching the product less tiresome and put emphasis on the importance of simplicity and a smooth user experience.

3. Perception vs. Reality: Always test for flawed design

When products are done being built, lazy developers get comfortable with what their output was without focusing on the intended impact of the product or the ways users will perceive them. Especially in the age of misinformation with people reading and perceiving data in conflicting ways, developers should always take into account perception of their product and not be oblivious by the users expected responses. To address this, having consistent user input in the building phase is important to make sure perception aligns closely with reality. In one of the reading, Data Visualization by Kieran Healy, the author describes humans poor perception when it comes to visualizing data. As a result, such information could lead to problematic conclusions and decisions that could harm either the user or the people that the user interacts with. No data visualization is perfect and developer’s can’t account for opinions drawn from building these visualizations however, perception plays a huge role in ways people picture reality.

Furthermore, testing for flawed design is important because people don’t act rational. The first thing I learned from my behavioral economics class is that people aren’t as rational as we think they are and because of this can stick to status quo bias with their perception. In a paper conducted by my professor, Evan Peck along with a team of computer science students, they found interesting conclusions to data being personal thus reinforcing some of the status quo biases assumption mentioned.

“We found that many people suggested that information has an objective quality that is immutable regardless of where that data may be showcased…” — Evan Peck

When building a product, the perception from the user should be taken into account or else the product will have unintended consequences. For one of my projects, I was asked to look at a flawed data visualization and redesign it with the intended purpose of reassessing the current president’s response to the COVID-19 pandemic. The initial data visualization (pictured below), published in a reputable non-partisan media outlet, displayed numerous flaws in the data and resulted in many perceptions that responded positively about the president’s response however this does not align with the reality that the pandemic has not been getting enough attention by the administration. This was a clear case of perception not aligning with the reality of the manner and developers not testing for these flaws.

Figure 1 — Visualization showing voters’ approval/disapproval of President Trump’s initial response to COVID-19. Source: https://viz.wtf/post/614218115870523392/why-is-50-higher-than-53 (original source is https://thehill.com/hilltv)

4. Continue to iterate designs

In addition to testing for perceived response of a product, designers and developers should always be aiming to improve the delivered product. This agile process of building and going back to make improvements is key to constantly delivering the needs of a user base as a new problem arises and a specific solution is necessary. Similar to when writing a paper, you would always want to get the feedback and improve from that constructive feedback until your paper is close to perfect. Throughout all the projects this semester, I learned the importance of getting valuable feedback that not only made me a better designer but also a better developer when creating for various user groups. One project that had extensive feedback amongst the team was the Avatar Bending Project when designing for expression (see below). As a team we were able to deliver our minimum viable product which was displaying the element bending animations we designed onto the body parts of the user however once we were able to implement that feature we decided to improve on the user experience and add a competitive game component to this. This feedback was given to us by users playing the game but from an internal decision about how we could improve what we already built. However, if this was a product that was built for hundreds of users, that feedback would have been regularly implemented and helpful when making new iterations of the product.

Avatar Bending Project — Design for Expression
Added feature to the existing product

In addition to the Avatar Bending project, another project that required many many iterations was the virtual reality country concert that my team and I designed. Initially we planned on having a simple environment for the user to experience without any additional immersive features. This was our minimal viable product because we struggled with adding avatars in the very beginning and getting onboarded on the software side. However once we got past that learning curve we wanted to iterate on our existing project and make the concert as immersive as possible without compromising the graphical capabilities of A-frame, the javascript library used to develop the product. As a result, we added a video of the performance and a mic for when the user wants to sing a long to the concert. The mic made it as though the user was on stage singing alongside the video.

5. Evaluate your product and transfer learnings to the next project

Overall, I believe as I worked on one project to the next, I learned how to be a better UX designer for all types of mediums and a better teammate. The feedback after my first HCI project gave me a foundation to improve on when I did my following project and this continued. My last learning is to always evaluate and reflect on your project processes and transfer them to the next project. This could be improvements in the ideation phase, development phase, iterations, or all the above. The strongest designers in the world are able to take feedback and constructive criticism from their products and improve the next go-around. Never stay stagnant with your progress and seek perfection. Although perfection may never be the ultimate destination, enjoy the journey and continue to learn from your mistakes. Good luck!

“Perfection is not attainable. But if we chase perfection, we can catch excellence.” ​–​ Vince Lombardi

--

--