A lot of people today are still confused about UI- and UX-design. Some even believe these fields of activity are the same. In this article, we will try to explain the core differences between UI- and UX-design.
What is user interface (UI) design?
User Interface Design deals with the form, outward appearance, and interactivity of a product. It is responsible for the transmission of a brand‘s energy and visual unity to the interface, to maximize user experience. You may use it as User Interface Definition.
In other words, a UI specialist is often responsible for:
— Product's visual appearance and graphic representation;
— Product’s interactivity and responsiveness to a user’s actions.
What is user experience (UX) design?
User Experience Definition: The purpose of user experience design in digital products is to refine the client’s gratification through the availability, and applicability provided by the interaction with a product. This means that UX-designers are mainly interested in how the product feels. It is about enriching the experience that people might have while using the product.
The main challenge of the UX designer is to guarantee that the product is logical, clear and user-friendly. The usual way to achieve this for UX specialist is to conduct user behavior observation tests. The tests are iterative, the results of each batch of tests are analyzed to identify and improve the difficult and rough “user stories.”
UX design process stages:
1. UX strategy formulation
At this stage, a UX-designer analyzes the project goals and objectives, its status (start-up or existing project) and creates the project description.
2. Analysis stage
If the end product exists already, a UX-designer should perform a complex assessment of its current state. They would report the problems and recommend necessary fixes based on their research.
Next, the peer analysis is conducted. Let’s review the features and tools of such a study:
A persona is a mythical character that mirrors one of the user classes for whom the product is developed.
Making personas for the project includes interpreting the different analytic data, conducting consultations, user behavior testing sessions, and other surveys into a small number of “common” users.
The main purpose of personification is to identify and reflect the prospective user base templates.
2.2 Storyboards, Scenarios
A scenario is a chronological record of “a common day” for a single persona, describing how the application or site matches into their daily lives.
A storyboard is a tool to describe when, why and how people use the product. It could be a simple draft sketch - to clarify ideas and give form to them, or a more polished comic – to ensure the efficient involvement of the audience.
Many of the UX-designers start the new projects from wireframes, as designing a fundament of the site layout is something everybody can sort out. A wireframe, as an approximate guideline for the interface layout of a site or an application, is the tool most widely associated with UX-designers.
After creating the static wireframes, the next step is the creation of a clickable product prototype based on them. Such prototypes can be tested by an internal team, client or focus group.
5. Prototype testing (wireframe level)
At this stage, various kinds of tests can be run, like thorough internal or external testing and different tools and techniques used. As the result, a list of needed fixes and changes is created (stages 3 to 5 can be repeated several times until a suitable result is reached).
6. UI design
Despite the fact that this part of the work is done by UI-designers, it must be included in the overall flow of the product’s interface design. At this stage, the designers draw all the screens and pages, as well as create the styles, looks, and feels of the final product.
7. UI prototype testing
At this stage, the prototype of an almost finished product is tested. Stages 6 and 7 can be repeated iteratively. Sometimes stages 4 and 5 are excluded from the production cycle and all the testing is done at the "UI prototype design" stage. Such tests may include:
7.1 A/B testing
A UX-expert could conduct a research to match the efficiency and quality of user experience of different GUI elements. They can test such hypotheses as “A blue button is more catching than a yellow one.” They can create and investigate multiple design versions, and discovere what a “better experience” represents.
7.2 User Testing
User testing is a process of demonstrating the product to users, asking them to take some actions planned beforehand and to voice their opinions. An amount of test iterations and the number of testers depend on the project budget and timeframe.
8. Transfer stage
At this stage, the project files and documentation are passed to developers.
9. Visual QA
The main goal of VQA is to make the product as close to perfect as possible. It is imperative to check the product for possible issues after the development team had implemented the UI. At this stage, the appearance of the product is evaluated and checked for possible bugs, inaccuracies in the interface elements (wrong font or the displaced button), or localization flaws.
10. Product launch
The work of the UX-designer doesn’t stop with the product launch. The feedback from the real users is analyzed for possibly missed problems in the product’s project. In some cases, the project can be restarted from the second stage.
The process of testing, designing, implementation and feedback analysis can be iterated many times in a row.
UX Design Process
UX Designer’s responsibilities:
- Product structure specification
Wireframing and Prototyping:
Implementation and Analysis:
- Coordination (with UI-designers and developers)
- Research and reiteration
To become the UX expert in a rapidly developing world, it is necessary not only to do a diligent job, but one has to stay up to date with modern techniques and technologies and also be versed in tools of the trade.
Here’re some of the most common wireframing, prototyping and design tools, known and used far beyond the circle of the designers:
Photoshop needs no introduction; it can be used for ordinary, fast wireframing. Even though this tool includes no ready libraries of interface components, designing general ideas, grouping elements, and layers can be done quickly and easily.
A complete designer’s tool with a trendy instinctive interface, Sketch is a functional vector graphic editor. “Because designing should be a joy, not a drag.”
A mighty vector drawing tool considered to be a quality standard by many designers. This is a superior software for creating logos, complex vector illustrations, and typography drawings.
For more information, you might want to check out our article Best UI UX Design Tools For Designers Toolbox .
If you want to start your career as a UX designer and wonder how much they earn, the following information might come helpful.
Average annual salaries in different countries:
- United States — $90,000
- California — $114,000
- New York — $95,000
- Washington — $84,000
- United Kingdom — $66,000
- Germany — $52,000
- Switzerland — $98,000 - $105,000
- Australia — $70,000
Ways to study the UX design
Twenty years ago it might have been okay for an employee to work for the whole of their career in one company, learn one precise role, and stay there until retirement. But nowadays things are getting inspiring. Junior positions now require a wide range of skills. Progressive companies are defining new career ways. It’s an enthralling time to act and study.
Seems like the education system can’t really catch up with the modern market of such occupations like UX-design or computer graphics in general, and this is where the numerous online courses rise.
Here are some tips for successful studies:
- Understand the field (learn the main differences between UI-, UX-, graphic and web designers);
- Read during your study (here are some articles for beginners or advanced scholars);
- Subscribe to online courses (generalassemb.ly, uxmastery.com, or coursera.org);
- Learn different tools (Adobe Illustrator, Photoshop, Corel Draw, Sketch etc.);
- Copy the masters — don’t be ashamed to copy great works at first, and take a leaf from a pro’s book.
- This is not the complete manual on becoming a great UX-designer, but now you have a base to start from. If you are interested, you might want to read the full tutorial here.
What is UX designer?
As you can see, the UX designer role is complex and could include some analyst's and information architect’s parts. It's a stimulating and rewarding creative job. The main purpose of a UX-designer is to link business objectives to a user’s needs through extensive testing and improvement until the result satisfies all sides of the process.