Originally I shared this guide to Syndicode blog to describe UI and UX design processes we use in the agency. Since this material appeared to be quite informative and guide-alike, I decided to share it to my favorite community of dev.to.
So, you know that design defines the success of most software products. And software development discovers new ways to use the design for various products. I talk about design for websites and applications.There is no great app without stylish elements and usability. The effectiveness of the application is measured by the optimum combination of functionality and attractiveness. Visual communication must be simple, intuitive and engaging.
The role of UI/UX design
Designing applications and websites pose special challenges:
- facilitating intricate tasks and workflows,
- enabling users to comprehend and manage complex data,
- accommodating a rich variety of user roles, needs, and processes.
But that worth it! Because an effective design and implementation of applications can have profound, positive implications for productivity, efficiency, accuracy, and satisfaction in a huge range of environments – from entertainment to healthcare.
You could have heard about UI or UX design before but never actually had a chance to get what, where and why it is used for. And no, UI and UX are not the same things. Read about principle differences between UI and UX before you went further. UX is the overall experience a user has with the product, and UI is the things the user will actually interact with and see.
A value of a great design
The key to successful application design is not a good idea or a good feature – it all comes down to the user experience (UX) and the user interface (UI). It doesn’t matter how great your idea is if the app is looking horrible and impossible to use easily.
If you’re developing a web or mobile application, one of the major things you need to get right is the way your app looks and feels. For example, if your field is eCommerce, a poorly designed app will lose you many potential customers.
For example, what does your application user see first when opening your app? The first thing your user sees is the landing page. What is a landing page? This is a start point from which the user understands if the application or a site will meet his/her requirements and fulfill the needs. It must be attractive and contain some call-to-action buttons for the user to know what to do next.
To add the value to the work of UI and UX designers, here you can find some interesting UI vs UX comparison:
- UX designer is like an architect. This person takes care of users and helps your business to improve measurable parameters (reduce bounce rate, improve CTR and so on). UX designer understands user behavior and psychology, knows a lot about interface ergonomics and able to analyze business needs to convert it into the user flows.
- UI designer at the same time is like a decorator. This person takes care of how the interface reflects the brand. It's more about unmeasurable things (like how cozy an interface is, is it stylish enough and so on). UI designer knows a lot about colors and color combinations, know how to read brand books and convert them into UI elements.
Sometimes UI and UX designer is the same person who is in charge of the whole design process. But let’s discuss each type of design separately.
What is UX design?
UX (User Experience) design is the process of creating products, systems or services that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function. It also includes the meaningful and valuable aspects of human–computer interaction and product ownership. UX handles the architecture of the content and the sitemap.
As a spoiler, I’d like to say that UI (User Interface) design, we’ll talk about in the next part, is an important aspect of UX design, it is a subset of it. Because UX design covers a vast array of other areas. Information Architecture (IA) is the second most viable aspect of UX design.
UX design helps users accomplish goals. It is not focused only on creating products that are usable, it also covers the other aspects of the user experience, such as:
So far, the good user experience is one that meets a particular user’s needs in the specific context where the target audience use the product. UX design is user-centered - the type of user defines the type of design.
That is why UX design is dynamic and constantly modified over time due to changing usage circumstances and changes to individual systems, usage context in which they can be found and so on. Here you can find some UX design trends that are expected in 2019. Also, we can say that user experience is about user-product interaction and experiences.
The main task of UX design is to create products which can be tailored to meet a user’s specific needs, but which provides functionality that is predictable. In other words, UX Design is to study user behavior and understand user motivations with the goal to design better digital experiences.
Let’s talk about the main requirements for the UX design. What should be the perfect User Experience design? The answer to this question can be presented as the list of UX design requirements which should be meet on different levels. These levels form the UX design pyramid.
UX principles and full UX stack
The goals on each level of the UX design pyramid could be reached through following the main UX design principles:
Hierarchy is one of the designers’ best tools to help users move through a product easily. It includes:
- Information Architecture (the way how content is organized across the app or site) and a
- Visual Hierarchy (that help users navigate more easily within a section or a page).
- Consistency In most cases, it could be reached by using a formal set of guidelines for how to design products for a particular device or format.
- Confirmation Require confirmation for any important or irreversible action to prevent errors user can accidentally make.
- User Control ‘Undo’, ‘back’, ‘search’ buttons, as well as keyboard shortcuts, are a great way to give a user the control over a website or an application.
- Accessibility It’s crucial for the product to easy-to-use by as many people as possible. UX design should remove the obstacles for people when they use the product, whether those obstacles are temporary or more permanent.
UX design balances business, people and technology. While it is true that a product cannot succeed without a healthy business, a business cannot succeed without a happy customer— and it is the UX Designer’s job to make the customer happy.
The full UX design stack
So, there are many things involved in UX design. The full UX design stack consists of:
- Surface (here we apply UI design)
- Skeleton (made by applying Interface and Interaction Design)
- Structure (formed by Information Architecture and User Flows)
- Scope (Functional Specifications and Content Requirements)
- Strategy (User Needs and Project Goals defined according to user research and business objectives)
But UI part is not going first. UX design begins with the identification of a problem through user research. There is no point in solving problems that users don’t care about.
UX design process
In a nutshell, UX design process steps are the next:
- User research
- UX wireframing
- UX prototyping
- UI design (Visual and Interaction)
- User Testing
Below you can find an overview of the main UX design process approaches.
UX design process can be described within several most popular UX design approaches.
Main approaches of the UX design process
Currently, there are three well-known UX design process approaches:
- GV Design Sprint (GV stands for Google Ventures)
A classic UX design process is usually taught in colleges and is built using the waterfall methodology. Here is the Classic UX design process:
- Research. Here the main problems should be discovered. Here you can find 10 diagrams for providing effective user research.
- Categorization the problems that were uncovered.
- Creating personas and journey maps (don’t mix them with user flows)
- Ideation exercises to generate solutions for great UX design and solving revealed problems.
- Building the prototype.
- Prototype testing.
- Sending the final prototype to development.
- Product launch.
- Gathering users feedback.
- Returning to the first step with the received user feedback.
Put it simply, as a scheme for describing a classic UX design process you can imagine something like this:
But there’s also the other approach to UX design process appeared in 2013 because the classic UX design process was incompatible with Agile development. The new design process called Lean UX and allowed UX to operate inside of Agile’s cone of uncertainty and rapidly update designs based on user feedback. It brought experience design back into harmony with product development.
In a nutshell, Lean UX is a set of principles based on the agile methods of the ‘Lean Startup’, where the focus is brought to the present. Instead of throwing design deliverables over the wall, teams accept that a final design can’t be created up front, and believe the answers will emerge as hypotheses are tested with MVP (Minimal Viable Product) development. Lean UX design process can be described as ‘build, measure and learn’ loop, or a ‘think, make, check’ cycle.
Another great design process was suggested by Google Ventures. This was Design Sprint. It allowed teams to rapidly define and test low-fidelity prototypes. The Design Sprint by Google Ventures can be seen as a combination of the three approaches: Design Thinking, Agile, and Lean. A key component of the sprint is the creation of a prototype, which is one of the best ways to gather data and test ideas out. The schema could be presented the next way:
UX design parts
To sum up, I’ll cover some more information on each part of what UX design does:
- Interaction design Creating engaging interfaces with well thought out behaviors. Simple and clear communication between users and technology. Interaction design is responsible for functions that enable the interaction between people and individual user interfaces or across multiple interfaces (or systems).
- Wireframes & prototypes Demonstrating the essential components of the website as a model for the task or interactive prototype before final designing. (By the way, a wireframe is not a sketch and not a mockup).
- Information Architect It is equal parts of art and science. Organizing, structuring, and labeling content in an effective and sustainable way.
- User Research Understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies. User research defines your audience and provides essential insights on how to best meet their needs. To provide qualitative user research we should consider the full picture: - Who will be using the app/site? - What they are trying to accomplish? - What might get in their way? - What are the primary client’s business needs? I made a post about Why user research matters to UX.
- Scenarios Description of user’s interaction with a project. These stories are very important both for designing an interface and usability testing.
But this is not the whole list of the things UX design include. Find the Key parts of user experience design with their real essence!
This is UX design to decide whether users will turn pages or scroll the content. And to take such responsibility on details and predict their impact UX designers should know a lot about human behavior. UX designers usually come from a variety of backgrounds such as visual design, programming, psychology, and interaction design. Later on, I’ll also talk about UX designers main tasks in details.
What is UI design?
Let’s start with the definition of what an interface is. An interface is a mechanism of the interaction of the two systems. From this point, a User Interface is an interface created for facilitating direct interaction between a system and a user.
On the display device, there are two common types of user interfaces:
- the command line interface (CLI), that contains text only, and is used mostly by programmers;
- and the graphical user interface (GUI), to which I’ll apply. It includes images, windows, icons, menus and so on.
In this material, I will stick particularly to the type of user interface that is responsible for visual perception - GUI.
UI or User Interface design is a discipline of designing user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on responsiveness and aesthetics, maximizing usability to foster a good user experience. As a part of UX, UI design focuses more on colors and typography. In a nutshell, UI design is typically a combination of:
- Visual Design (the look and feel) and
- Interaction Design (how it works).
As an example, UX design is focused on where to put the button for the user to find it easily, whereas UI design will think on how to make this button nice-looking to make the user want to press it.
Why do we need a user interface? The product must be visually appealing and beautiful. UI design crafts a common visual language and hierarchy that enhances how users engage with your product.
UI brings together concepts from Interaction Design, Visual Design, and Information Architecture.
User interface elements include buttons, text fields, checkboxes, sliders, icons, tags, message boxes, pagination etc.To understand better what UI design is, you should take a small tour on the main UI design elements.
UI design parts
An appealing user interface design can’t be developed without the using of all the techniques from the next fields:
- Visual design Making the general product’s aesthetics and engaging your audience with user-centered principles as web-oriented design or conceptual art. The main goal of the Visual Design is to shape and improve UX with the help of illustrations, photography, typography, space, layouts, and color. ‘Line, shape, negative space, texture’ - it’s all about visual design. Learn more about it on the Interaction Design Foundation page about Visual Design.
- Colors Choosing the right colors for your project is very important because of the mental associations with emotions and meanings. It’s also important to follow the brand colors and use them wisely depending on a design you want to create and the message you want to share.
- Graphic design Graphic design is responsible for combining images, typography or motion graphics together to impress your customers. Graphic Design aims to pursue pixel perfection. This is to ensure that texts have perfect kerning and colors conform to brand guidelines. Graphic Design is a specialized discipline, and there is a certain level of craftsmanship and a set of specialized skills (such as typography and color theory) required to produce great visuals. It’s often mixed with Visual Design.
- Mockups A mockup is a scale or full-size model of a design used for demonstration, design evaluation, promotion, and other purposes. Mockups meant to show the final look of the design with visual details, such as colors and typography. Wireframes, mockups, and prototypes are often mixed, but they just represent the different stages of the design flow. A wireframe is a low-fidelity way to present a design, it outlines structures and layouts. Unlike a wireframe, a mockup looks more like a finished product or prototype, but it is not interactive and not clickable. Mockups are used for offering a range of options for structuring screens in applications. Along with layouts, they help organize content and make the user interface understandable.
Typography is a driving force in all forms of communication art. This is the art and science of font style, appearance, and structure which aims at delivering the aesthetic and easily readable copy to readers. Typography helps to add an impression power to your messages on a print- or screen-based project.
Good typography should:
- Work well in various sizes;
- Have easily distinguishable letterforms;
- Have recognizable hierarchy for better perception.
Additionally, nowadays UI design largely depends on motion design which creates instant user feedback crucial for any user interface. Animations, visual effects, and screen transitions have a tremendous impact on how first-time users will engage with the app. Discover the power of motion design in my blog article.
UI software prototyping types
As I mentioned before, prototypes are different from wireframes and from mockups. I previously added prototypes to UX design, but as far as they are usually used for users to test product, prototypes must be high fidelity, interactive and fit the final user interface as much as possible. That is why in the next part I’ll talk of user interface prototypes.
Prototypes simulate the interaction between the user and interface as realistically as possible.
There are 5 common types of UI software prototyping:
- Paper prototyping (Sketching) Sketching in the prototyping process to record the main ideas (usually on paper), it is confined to idea generation and communication with the design team.
- Low-fidelity prototyping Low-fidelity prototypes are rough representations of concepts that help to validate those concepts early on in the design process. In a nutshell, this is a raw presentation of our ideas. Low-fidelity prototyping is usually used by design teams to emphasize interactions and thoughts.
- Rapid prototyping Rapid prototyping is a mid-fidelity technique based on user research. Rapid prototyping helps the designer to think about what needs to be done to reach the end goal. It goes through a series of quick iterations and feedback sessions that could potentially solve the problem. The main thing about rapid prototyping that makes it very fast is the use of a wide range of applications, different digital prototyping and user research tools.
- High-fidelity prototyping (Interactive prototyping) Unlike low-fidelity prototyping, high-fidelity prototyping requires more time, specialized skills and resources. A high-fidelity prototype is a computer-based interactive representation of the design in its closest resemblance to the final version in terms of details and functionality. It usually presents usability and realism all in one.
- HTML prototyping (some people don’t count this type) HTML prototype is a prototype developed using HTML. It can be seen in the browser. It has no stylistic choices and is minimal in its appearance, but HTML prototype can go onto the coding stage a lot faster than other prototypes because it has already been partly written in code.
Every type of prototyping has its own list of digital tools that fit best the process. From Keynote and Google slides to InVision and Adobe XD… Here you can explore the ultimate list of UI prototyping tools used for different types of UI software prototyping.
UI design principles
While creating UI prototype a good designer follows the next 6 User Interface design principles (according to Larry LeRoy Constantine) :
- Structure. It is concerned with overall user interface architecture and says that models should be clear, consistent, recognizable and contain related things together, separate unrelated ones, and making similar things resemble one another.
- Simplicity. The design should make simple, common tasks easy, communicating clearly and simply in the user's own language. The shortcuts must be meaningfully related to longer procedures.
- Visibility. No redundant information and odd alternatives. The design should make all needed options and materials for a given task visible without distraction.
- Feedback. Users should be informed and understand all the relevant actions, changes of state or condition, errors or exceptions in a clear, concise and familiar way.
- Tolerance. The design should be flexible to reduce the mistakes and misuse by allowing undoing and redoing.
- Reuse. The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency.
Let’s talk about how to meet all the main UI design principles that are mentioned above. To do this, designers use some simple yet beneficial UI techniques.
First of all, a user interface technique (interaction technique or input technique) is a combination of hardware and software elements that provide a way for users to accomplish a single task. For example clicking a button, pressing a key, performing a mouse gesture or uttering a speech command.
In UI design there are tens of different effective techniques helping the user to accomplish the task. I would like to name the most famous UI techniques.
- Interaction styles like form filling or menu selection etc.
Interaction design patterns that represent a way to describe solutions to common usability or accessibility problems in a specific context. In other words, this is a formal way of documenting a solution to a common design problem.
- Organizational structures and schemes:
- Hierarchical structure is based on the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.
- Sequential structure where users follow the special path completing the tasks one by one.
- Matrix structure when users can choose the navigation way on their own by alphabetical, chronological, topic’s (grouping of the specific subjects or genres) order or the groups of users (a type of audience).
- Content organization models:
- Single page model.
- Flat model where all the pages are equal and they are put at the same level of navigation.
- Index model allows users to access pages via the page list which is available on every page.
- Strict hierarchy model gives users only one way to access the subpages, from the main page.
- Co-existing hierarchy model provides users with various ways to access the content but guides them through the certain path so that they would take expected actions.
- Daisy model aimed at leading users to the homepage every time they accomplished a task.
- Organizational structures and schemes:
- Visualization technique that emphasizes the output and aimed to organize and structure numerical and non-numerical data in a convenient way and clear, visually appealing way.
Research and innovation. Some examples:
- Interactive layers
- Custom illustrations
- Split screens
- Bold typography
- Buttonless UI
- Vibrant and bold colors
- Photo content
There are more examples, but most of them can be categorized within the groups above.
After you know all the important UI techniques I must warn you about the most annoying ones. Please, consider them in order to save your user from extinction.
UI design process
There are several phases and processes in the user interface design that I can name. Here are some of the most viable ones:
- Functionality requirements gathering. This step covers assembling a list of the functionality required to accomplish the goals of the project and the potential needs of the users. Usually, this stage starts right after the discovery session with the client.
- User and task analysis. This is the study how the potential users will perform the tasks that the design must support. This stage is connected with user research we do as a part of the UX design process.
- Information Architecture (IA). This process covers the development of the process and information flow of the system. During this phase, we choose the UI interaction style, design pattern, and visualization technique. Many UI design techniques I described earlier were formed during the Information Architecture stage.
- Prototyping. This stage covers the development of prototypes, wireframes, mockups, paper prototypes or simple interactive screens.
- Usability inspection. Usability inspection can be used to evaluate prototypes or specifications for the system, which usually cannot be tested on users. Usability inspection methods are a cognitive walkthrough, heuristic evaluation, and pluralistic walkthrough.
- Usability testing. UI design testing allows to understand the reception of the design from the viewer's standpoint. Usually, during usability testing users are asked to complete tasks to see where they encounter problems and experience confusion.
- GUI (Graphical user interface) design. This is an actual look and feel of the final graphical user interface design. At this stage, we decide on visual communication and problem-solving through the use of typography, photography, and illustration.
- Software Maintenance. Occasional maintenance goes after the deployment to fix software bugs, change features, or completely upgrade the system.
While following the UI design process, don't forget about the basic rules to create the great User Interface design!
In previous sections, I tried to collect, structure, explain and present you all the main terms and nuances of UI and UX design. But you might want to read more about it and here you can find the list of the best books about UI and UX design.
Web and mobile application design
UX and UI design primarily used to create outstanding websites and designs for mobile applications. Let’s make a brief intro to the web and mobile design.
Put it simply, web design is a process of creating websites. It involves Information Architecture, website structure, user interface, navigation ergonomics, website layouts, colors, contrasts, fonts and photography or illustrations as well as icons design.
Web designer should:
- Know how to create web layouts and deliverables, plus:
- Presentations etc.
- Be familiar with industry-standard software.
- Have wireframing skills.
- Be aware of frontend development nuances.
- Know how to code (that is a plus).
UX design for web enhancing user satisfaction by improving the usability, accessibility, and efficiency of user interaction with websites.
Mobile application design
Application design for mobile (desktop and laptop as well) poses special challenges:
- facilitating intricate tasks and workflows,
- enabling users to comprehend and manage complex data,
- accommodating a rich variety of user roles, needs, and processes.
The UX/UI Design of the application improves the user experience and customer satisfaction that ultimately helps increase the number of users of the specific application.
Mobile UX design refers to the design of positive experiences during the use of mobile devices and wearables. Depending on the context, mobile app design places unique requirements on the user experience.
Read about these 8 key principles of mobile UX design that proved their efficiency.
In recent years, such requirements were met by following the next mobile app design trends:
- Designing for bigger screens;
- Simplifying UI;
- Interaction by swiping and gestures;
- Adding more navigational options;
- Adding functional animation;
- Using scalable typography;
- Experiments with color palettes, and more.
To understand these trends, I recommend you to read about the key differences between a web application and a website in my material about web app development.
Another thing to consider is mobile interface design myths we used to hear sometimes. To be honest, some of these myths could take place in the past, but nowadays mobile experience went much further.
What UI/UX designers do?
To start with basics of what UX designers do, UX designers consider Why, What and How for the use of the product they work on.
- Why involves the users’ motivations for adopting a product, whether they relate to a task they wish to perform with it, or to values and views associated with the ownership and use of the product.
- What addresses the things people can do with a product, its functionality.
- How relates to the design of functionality in an accessible and aesthetically pleasant way.
UX designers start with the Why before determining the What and then, finally, How in order to create products that users can form meaningful experiences with. In a web or mobile application design, designers must ensure the product’s ‘substance’ comes through an existing device and offers a seamless, fluid experience.
At What stage, UX designer should answer some fundamental questions like:
- Do users need the product you are making?
- Will users pay for this product?
- Will users spend time looking for it and learning to use it?
- What is the key feature users will need?
- Will users need all the features you building? How many and what features they really need?
The main questions for the How stage are different and relate the implementation:
- How should the content be organized so that users can easily find it?
- Will the application be easy to use?
- Where the users might be get confused or lost? What difficulties they might face?
- What content is needed and how should it be written to be most engaging?
A UX designer’s typical tasks vary, but often include user research, creating personas, designing wireframes and interactive prototypes as well as testing designs.
In simple words, UX designers are involved in conducting extensive user research, formulating an information architecture and creating user profiles and stories. UX designer doesn't necessarily possess visual or graphic design skill set, however, an understanding of psychology and systemic design is a must.
UI designers at the same time try to break down complex structures into simple comprehensible formats for the end user’s convenience. Therefore, both UX/UI and web designers work towards providing an enjoyable and effective experience for the user.
UI/UX designers should be able to understand the need of the users. The objectives and goal of the application are still the first determining factor before they even placed their skills and knowledge in creating web applications, mobile apps, website, and service. Then after understanding the need of the user and the objective of the application, a designer must be able to effectively translate it into functionalities. They must also be able to determine the possible future requirements of the application. In permanent cooperation with other development team members, designers are engaged in the product development stage from the initial phase up to the date of completion. These tasks and obligations make a scope of the main duties of the User Experience designer. But I suggest you read about what UX designers are paid for in details.
Applying to the company I work in (Syndicode), we simplify the UI/UX design processes a bit. This is explained by the number of projects you work on in parallel. Also, I can say that when the specialist gains a lot of experience, the time for following all the procedure steps is reduced. Skills help you work faster.
How it all starts in Syndicode? Firstly, we are having a Discovery Session with a client to find out as much as possible about the project. The main goal of this session is to gather key project information so we could gain a high-level understanding. Then we will create a plan according to which we’ll work on the UI/UX/web/mobile design solutions and agree on every step of it with the client. Then we go through nessesary steps of UI and UX design processes according to Lean UX.
- A great list of resources for UI and UX designers to find tools, blogs, hacks and inspiration.
- Indicators, validators and notifications in application design might help you to understand how the user can be informed with the three common approaches for status communication.
- Accessibility in UX design.
- Behance, Dribbble and Muzli are great sources for designer’s inspiration.
- Follow up mobile design best practices described by Nick Babich.
- UI and UX design trends for 2019 will help you with the direction.
- The beginner’s guide to Information Architecture (IA) is a comprehensive source with the answers about what Information Architecture is, its common methodologies, tools, conferences and IA books.
- Introduction to user experience design.
- Learn the main UX design methods and techniques.
- A comprehensive guide to UI design.
- More about UI design on Wiki.
- Learn the differences between a prototype, wireframe and mockup.