UI Design: More Than Just Making Things Look Pretty
Your UI is your handshake. Your UI is what your users are interacting with. It's your first impression. Sounds important, right? Let's dig deeper.
Ethan Parry
Your UI is your handshake. Your UI is what your users are interacting with. It's your first impression. Sounds important, right? Let's dig deeper.
When talking about web and app design, the terms UX and UI are likely to come up. Even though they are often lumped together in job descriptions and used interchangeably, they aren’t one and the same.
Before we dive into UI design, it is important to understand UX design. The “UX” in UX design stands for “user experience”. Don Norman, the inventor of the term, says user experience “encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” Did you notice how he didn’t solely mention digital services and products? Whether buying a physical product at a store or browsing a website, the experience needs to be as smooth as possible. Can I successfully navigate the page without getting lost? Do I have all the information that I need to complete the required tasks? A UX designer’s role is to understand the purpose and functionality of the product.
If UX design is more about the holistic, big picture view of the product, UI design is a part of said picture. The “UI” in UI design stands for “user interface”. A user interface is a point at which users interact with a computer, website, or application. It consists of buttons, text, images, colors, animations, and all the other items that a user could interact with. A UI designer’s role then is to visually guide the user through a product’s interface in an intuitive way.
The responsibilities of a UI Designer will vary depending on the company and the project, but generally speaking, they are responsible for designing and prototyping.
When it comes to design, it is much more than just making things look pretty and adding color. UI design is also about making sure that all of the visuals are consistent with one another and that all of the elements are strategically laid out.
Some design-related tasks that you may see on a UI Designer’s to-do list include:
In order to accomplish those tasks, UI designers often use tools like Sketch, Figma, Adobe XD, and Photoshop.
Once the designs are created, it is important that they are tested with real users. Prototypes allow one to quickly identify any flaws before launching a product, service, app, web, to market. If there is something wrong with the prototype, it is important that is fixed and iterated upon.
Some prototyping-related tasks that you may see on a UI Designer’s to-do list include:
In order to accomplish those tasks, UI designers often use tools like Sketch, Figma, Adobe XD, Principle, Flinto, Webflow, and ProtoPie.
What makes a good user interface? Is it the use of colors? The layout of the screen? All of the above? Here are 10 guidelines that will help you deliver user interfaces that resonate with your users:
Repeat after me, “I am not the user”. When designing an app or other product, it is often easy for designers to forget who they are designing for and they get caught up only thinking about themselves. This unfortunately often results in poorly designed products.
This happened to me in my first UX design project when I was tasked to create an application for busy mothers. I am not a mother, nor do I have any kids, but as someone who considers himself to be very tech-savvy, I decided to add a wide variety of features that I thought the end-user would like. When I finally got the application in front of the target audience, the feedback was that they didn't need all of the features that I added. In fact, they wanted it to have a lot fewer features and be more straight-forward.
When creating interfaces, one needs to know their users and design with intention. Every choice should be directly tied to the target demographic.
Once one understands the user, they must consider how the users will interact with the designs. They could interact with the app directly - such as by tapping a button or swiping left - or indirectly - such as typing into a form or using shortcuts.
In today’s society, interfaces extend beyond screens. When design interfaces, one must also consider designing for voice. Siri, Google, and Cortana are becoming household names. When designing voice interfaces, be sure to keep in mind that 1) users talk differently and the voice assistant should be able to understand different communication styles, 2) one should plan for errors that may occur during the interaction, and 3) show some visual indication before, during, and after the interaction.
We all make mistakes. It is a part of being human. Well designed interfaces ideally 1) prevent mistakes before they happen, and 2) provide ways to fix them. One example of preventing mistakes before they happen is by having fields that detect when something has been entered incorrectly (eg. email address or password). When it comes to writing error messages, make sure they provide the context of what went wrong and then how to fix the problem (eg. The return date cannot be before the departure date. Please choose a return date that is after the departure date.)
Ted Nelson, American sociologist, philosopher, and pioneer of information technology, once said, “A user interface should be so simple that a beginner in an emergency can understand it within ten seconds.”
The interface should be so clean and easy to use that there is little to no learning curve. Focus on only showing what is important and hiding any more advanced options from the reach of the user.
As we use our digital devices, we are constantly being bombarded with things grabbing for our attention. When we are on the Internet, for example, banners, tooltips, pop-ups are everywhere. According to Hick’s law, the time it takes to make a decision increases with the number and complexity of choices.
When designing user interfaces, one must simplify choices for the user by breaking down complex tasks into smaller steps, highlight recommended options, and use the concept of progressive disclosure – only reveal what is important at the precise time – to help minimize the cognitive load for new users.
According to Fitts’s law, the time to acquire a target is a function of the distance to and size of the target. In other words, the bigger and/or closer something is, the easier it is to put your cursor on it. It is recommended to have the touch targets large enough so that the users can easily discern what it is and accurately select them. They should also have ample spacing between each other and be placed in areas of an interface that allows them to easily be reached.
In the case of VeryGoodCopy, the button is large enough that the user can intuitively understand where to click and where not to click.
Designers tend to like to think outside of the box, but sometimes that does more harm than good. To reduce cognitive load, stick to established UI design patterns that users are already familiar with. As the lifelong adage goes, if it ain’t broke, don’t fix it.
Avoid using dark patterns, designs that are intentionally created to trick and lure users into performing certain actions, such as automatically adding items to shopping carts or making the option of sharing of personal information enabled by default.
According to the World Health Organization, about 15% of the world’s population lives with some form of disability. In 2019, the flow of American Disability Act web-related lawsuits reached a rate of one lawsuit every working hour, which comes out to more than 2,000 for the year. Accessibility is important.
One thing that UI designers can do is ensure that their designs have enough color contrast. Individuals who have low vision could find it difficult to read text from a background color if it has low contrast. To check if one’s UI design meets the W3C guidelines, I recommend using the Contrast app (Mac) or the WebAIM color contrast checker.
When we talk to someone, we expect them to respond back. When we start the wash cycle on the laundry machine, we expect the doors to lock and for the cycle to start. We need feedback. The first of Jakob Nielsen’s usability heuristics, visibility of system status, “refers to how well the state of the system is conveyed to its users. Ideally, systems should always keep users informed about what is going on, through appropriate feedback within a reasonable time.”
For example, on the Flux Academy main homepage, there is a box that allows you to sign up for Ran’s free email course “High-Value Web Design Secrets.”
I filled out my name and email address and right away was presented with the following text confirming that I signed up successfully, “You’re in! Please check your inbox.” There was no confusion of whether or not my request was processed correctly or if I needed to reload the page or restart my laptop.
Once the UI design is “finished”, it doesn’t mean that the work is over. UI, along with its UX counterparts, have to ensure a smooth handoff to developers and be prepared to iterate based on user feedback. UI designers should not wait until this handoff in order to begin their relationships with the development team. Designers need to collaborate with developers from the very beginning.
How can designers and devs have a better relationship? First, designers should help developers understand the problem space. What is the easiest way to do this? Bring them in earlier on in the process. If developers were invited at the ideation phase, they would better understand the why behind all of the design decisions that were made and better understand how the product fits into the bigger picture of the company’s roadmap.
Second, designers and developers need to have a shared language. Developers don’t need to be able to design beautiful interfaces, nor do designers need to be able to code, but both parties need to understand the basics of each discipline in order to be able to communicate with one another.
Third, designers and developers should create a process that works for both of them. The UX process is an iterative one, so whenever changes need to be made, the individual who requests the change should be willing to explain their reasoning. Having frequent check-ins as a part of the process also would help improve communication and motivate the team to move forward.
A product can be organized really well and have its purpose defined, but if it isn’t aesthetically pleasing and easy to interact with, no one is going to use it. A product can also be well thought out visually with contrast, color, interaction, and typography, but if the product doesn’t resolve a clear user need, no one is going to use it. A product needs both UX and UI in order to truly survive and thrive in today’s market.
Mastering the fundamentals of UI design is but one piece of the puzzle to be able to design the kind of websites that clients happily pay high prices for. In Ran Segall’s “The $10K Website Process” course, not only will you learn how to make beautiful websites, but you will also learn how to design strategically and present your work in ways that make that value that you provide crystal clear.
After this course, you’ll be able to tell compelling stories with your designs, position yourself as a high-value expert, lead design, content, and development in your projects, and confidently work with $10K clients.
To see a full breakdown of what the course has to offer, what other students have said about it, and the curriculum, click here.
