What Is User Interface Design?
User interface refers to the graphical aspects of design. This includes all the design aspects that the user can see and interact with.
The focus of UI design is to make an interface that is functional and allows the user to complete the tasks they need while being visually appealing. The UI designer might also be the front-end developer and code the front-end code. However, the UI designer could also create templates and designs, which a front-end developer then programs.
What Is User Experience Design?
User experience focuses on whether a product met the needs of its users. UX designers want to know how people are using a product and if the design helps them to accomplish their goals. Their job is to optimize a product beyond ensuring that it is functional.
The bulk of a UX Designer’s job is to complete usability tests to understand if users can complete tasks that matter to them and if they want to use the product. They do not necessarily design or code the interface, but they do refine the design to better suit the end-users’ needs.
UX design can encompass aspects beyond the design of the product as well. A UX designer has to consider how their user-base will discover the product and understand how the user’s experience will shape their feeling about the company as a whole.
It’s the UX Designer’s job to make sure that the software user’s needs are taken care of, and that they are delighted in the process.
How Does UI and UX Differ?
Simply put, UI cares about how something is designed, and UX cares more about how it is used. To better illustrate this, let’s consider how a UI and UX designer would approach assessing software.
Gimp is a popular GNU Image Manipulation Program. It is a good program, but, like most open-source software, there is always room for improvement.
The UI designer would work on making everything you can see and interact with here aesthetically pleasing and functional. A UI principle that Gimp implements well is its use of uniformity. If you right-click on the canvas, the menu options along the top are displayed. They are shown in the same order and have all of the same options available.
Gimp’s graphical interface has been streamlined over time to have a minimalist design. Previous versions had colored icons and multiple windows. The new design is much more aesthetically pleasing. However, the icons have changed quite a bit between different versions, which violates consistency. But, overall, Gimp has a pretty good interface.
On the UX side of the coin, there is a lot that could be improved. Can you intuitively tell what each of these icons does? What does the wave icon do?
Commonly used tools and features are often buried in layers of tabs and menus, making the software harder to use than necessary. Some features are not intuitive. For example, when moving layers, the default setting is “Pick a layer or guide” to move, but it is very hard to predict which layer actually moves.
Gimp is a great product but can be frustrating to use at times. The interface functions fine, but it is not always streamlined to accommodate the user. This nicely demonstrates that although the user interface is directly connected to the user experience, the user experience is its own beast.
Designing a large complex application is very time-consuming. To make it more manageable, different aspects are assigned to different people or teams. While the UI designer is creating the design, the UX designer could be researching how people will use the product. Their research can then be incorporated into the design and layout.