What makes a great graphical user interface (GUI) for HCI?

Getting started

Human-Computer Interaction (HCI) is the study of how people interact with computers and other digital devices.

It is becoming increasingly important as more and more aspects of our lives are mediated by technology.

If you are interested in designing or developing digital products, or if you simply want to understand how technology affects our lives, then HCI is a field you should explore.

This guide focuses specifically on Graphical User Interfaces (GUIs), which are the most common type of interface used on desktop and mobile devices.

Who is this for?

This guide is for anyone who wants to learn more about HCI and GUI design.

It is particularly useful for:

• Web designers and developers
• Mobile app designers and developers
• User experience (UX) designers
• Product managers
• Anyone interested in technology and its impact on society

How to

Here are the steps to get started with HCI and GUI design:

1. Learn the basics of HCI theory and principles. This will give you a foundation for understanding how people interact with technology and what makes a good user interface.
2. Study examples of good and bad GUI design. Look at popular apps and websites and analyze their interfaces. Pay attention to things like layout, color, typography, and navigation.
3. Practice designing your own GUIs. Start with simple interfaces and work your way up to more complex ones. Use tools like Sketch, Figma, or Adobe XD to create wireframes and prototypes.
4. Test your designs with real users. Get feedback on what works and what doesn’t. Iterate and refine your designs based on this feedback.

Best practices

• Keep it simple. The best interfaces are easy to use and understand.
• Be consistent. Use the same design patterns and elements throughout your interface.
• Provide feedback. Let users know when they have completed an action or when something is loading.
• Test with real users. Don’t assume you know what users want. Get feedback and iterate based on that feedback.

Examples

Let’s imagine you are designing a mobile app for a new ride-sharing service.

Here’s an example of how you might apply HCI principles to create a user-friendly GUI:

Role-play conversation

You: Hi, thanks for agreeing to test our new ride-sharing app.

Can you tell me a bit about your experience using ride-sharing apps in the past?

User: Sure, I’ve used Uber and Lyft before.

You: Great, well our app works similarly.

Let’s start by getting your location and destination.

User: Okay, I see the map and the search bar.

Do I just type in my address?

You: Yes, that’s right.

And if you don’t want to type, you can also use voice commands.

User: Oh, that’s cool.

Let me try that.

“Take me to the airport.”

You: Perfect, the app found your location and destination.

Now you can choose the type of ride you want.

User: Okay, I want the cheapest option.

You: Got it.

And here’s an estimate of the cost and the time it will take to get there.

User: Nice, that’s helpful.

Can I pay with a credit card?

You: Yes, you can add your credit card information in the settings.

Or if you’ve used the app before, it will remember your payment information.

User: Okay, that’s convenient.

Overall, I think the app is easy to use and I like the voice command feature.

You: Thanks for your feedback.

We’ll take that into account as we continue to improve the app.