What is UX/UI design?
Everything from a chair to a website should be user-first. And there is no right way to do it. Simply put, UX/UI design comprises 3 things: You build for the user, collaborate with developers to make it technically viable, and you meet business goals.
UI refers to the aesthetic elements of a product, while UX is more about the functional aspects of how the user interacts with a product or service. UI is about the visuals, like color palettes or button styles, whereas UX on the other hand focuses on how to move and navigate through the product to help achieve a certain task.
In the world of design, there are a few well-known debates that are never quite settled. One of the big ones is the difference between user interface design and user experience design. The combination of UX and UI shapes one’s entire experience of a product. If one product has a better UX/UI design than the other, people are going to use the other more because they prefer the overall experience and ease of achieving what they wish.
User Research
User research provides the best foundation for any design strategy, helping you create an optimal product for users. It also helps identify early adopters who would use the product, along with discovering people who can give contextual feedback on the product. User research focuses on understanding behaviors, needs, and motivations through observation techniques, tasks, and other feedback methods like surveys.
A challenge faced within organizations is that user research is not entirely a quantitative process with neat numbers, graphs, and figures at the end. It is a predominantly qualitative process. It’s also difficult to prevent bias from creeping into the research process due to a lack of objectivity.
Human-Centered Design
Human-Centered Design refers to what users and team members want and can be applied to both physical and digital products. It is a way to ensure that products are embraced by users whilst also meeting an organization’s business goals. It ties together what people desire, what is organizationally feasible, and what can be financially viable.
However, Nielsen Norman Group points out that despite insights gained from field studies on UX/UI design, few organizations take advantage of this technique due to:
- Lack of understanding of the importance of techniques
- Uncertainty about how to plan and conduct a field study
- Misconceptions that it will be too time-consuming or expensive
- Difficulty in interpreting data collected
Accessibility through design products
Universal design is an ethical practice. It enables all sorts of users to use a product instead of just a few and isn’t aimed towards someone, thereby standardizing design and ensuring equal treatment for all users.
The concept of universal design started in architecture and pervaded other fields, such as education, product design, and human-centered design processes. Universal design provides a holistic approach to adding value to any field. While the word “all” could be overwhelming, trying to think of as many different types of people would help with the personas for the research for accessible UX/UI design. An equitable, flexible, simple, and intuitive design that provides options and allows for fixing errors are factors that bind accessibility.
Website and App design
Web design is the process of creating a website application that can be used (UX) to meet users’ needs in completing any tasks (UI). They should ideally be intuitive in their navigation experience and be accessible from different devices. Web design is more than graphic design since designers must know functionality, technical constraints, and trends along with user expectations and competitors’ products, which change frequently.
Websites are primarily content-driven. They include static pages (like landing pages, discussed later!) and they have an open user flow where visitors click around in any order depending on what information they want next. To set up a website people use HTML, JavaScript, and CSS.
HTML: The Structure Layer
The content layer of a web page is the HTML code of that page. Acting as a foundation, HTML creates a platform upon which a website can be created. Each aspect of the site’s content should be represented in the structure layer, which then allows customers without JavaScript or CSS access to the website, if not all of it.
CSS: The Styles Layer
This layer tells the HTML document how to present to site visitors and is defined by CSS (Cascading Style Sheets). All visual styles for a website should ideally be listed in an external stylesheet. You can use multiple stylesheets, but every CSS file requires an HTTP request to fetch it, affecting site performance.
JavaScript: The Behavior Layer
This layer makes a website interactive, allowing the page to respond to user actions or to change based on a set of conditions. While JavaScript is the most commonly used language, CGI and PHP are very frequently used, too.
Apps, in contrast, are dynamic applications that let the user perform tasks in an interactive way. They need a more complex combination of programming languages: while HTML, CSS, and JavaScript are frontend apps, backend languages like PHP, Ruby on Rails, or Python are needed to make apps.
Web design is different from app design in that web designers need to consider the full range of devices that can access their site along with an understanding of what different web browsers can do. Web apps are more complex and need additional support, such as whether the app would require offline functionality so users can complete their tasks, whether it would need multiple logins, etc.
The Stages of UX/UI Design
Designing for either would require understanding the users and the product market, and undergoing market research, competitor analysis, and consumer analysis for the UI/UX of websites and apps.
The double-diamond design framework
A framework that has been around for a while is the double-diamond design model. It was officially invented by the British Design Council, back in 2005. The Council wanted to learn more about how people process information to better create solutions. They found that across all companies, people went through the same steps in search of innovation.
The two diamonds represent a process of exploring an issue more widely and then taking focused action. It offers four phases:
Discover
Understanding the issue rather than merely assuming it. It involves speaking to and spending time with people who are affected by the issues. It involves:
— Market research
— User research
— Managing information
— Design research groups.
Define
The insight gathered from the discovery phase can help to define the challenge in a different way. It involves:
— Development
— Management
— Sign-off.
Develop
Give different answers to the clearly defined problem, seeking inspiration from elsewhere and co-designing with a range of different people, involving:
— Multi-disciplinary working
— Visual management
— Development methods
— Testing.
Deliver
Involves testing out different solutions at a small scale, rejecting those that will not work, and improving the ones that will. It leads to:
— Final testing, approval, and launch
— Targets, evaluation, and feedback loops
The eleven companies and their employees spoken to in the research – such as those in graphic design, product, and industrial design, and visual communication – showed a common emphasis on a wider skill set, such as multi-disciplinary working, business acumen, and strategic thinking. Since many businesses have outsourced manufacturing and commodity activities, the design process is similar to a design management process.
Design Thinking
Another way of approaching the design process is by Design Thinking. The world has become increasingly interconnected and complex since cognitive scientist and Nobel Prize laureate Herbert A. Simon first mentioned design thinking in his 1969 book, The Sciences of the Artificial. Professionals from a variety of fields then advanced this highly creative process to address human needs. It’s a non-linear process that teams use to understand users, redefine problems and come up with innovative solutions to test. It involves five phases—Empathize, Define, Ideate, Prototype, and Test.
Empathize—Research Users’ Needs:
You should gain an empathetic understanding of the problem you’re trying to solve through user research. Empathy allows you to set aside your assumptions and gain insight into users and their needs.
Define—State Your Users’ Needs and Problems:
You need to now analyze your observations and define the problems you and your team have identified. These definitions are called problem statements. You can create personas to help keep your efforts human-centered before proceeding to ideation.
Ideate—Challenge Assumptions and Create Ideas
You can now use the background of knowledge from the first two phases to “think outside the box” and look for ways to view the problem and identify innovative solutions.
Prototype—Start to Create Solutions:
Here, the aim is to identify the best possible solution for each problem found. Coming up with inexpensive, scaled-down versions of the product or specific features would help to investigate the ideas generated.
Test—Try Your Solutions Out:
This involves testing the prototypes. Although this is the final phase, design thinking is iterative: Teams often use the results to redefine one or more further problems. You can return to previous stages to make further iterations and refinements – to find or rule out alternative solutions.
Information Architecture (IA) in UX/UI Design
An IA helps to organize and structure information in a logical way. Designers categorize and create a sitemap to make the experience intuitive for users. Then, test these with current or potential users and incorporate their feedback into future iterations.
Once all the background work for the UI is done, the focus shifts to the appearance and style of the UX. Here one figures out the necessary components of user interface design and sets out a common style, color palette, typography, and forms to implement in the product. Since users form their first impression in the first few seconds, the website and app visual design needs to be as close to perfect to awaken their interest and turn them into customers.
A soft launch, where you roll out to a small group of users first, would be useful to fix all bugs in UI/UX on the official product.
It’s also important to monitor website monitoring metrics (like website load times, etc.) and check user behavior to improve engagement and identify product blockers.
The landing page
Landing pages are one of the more important parts of a website. While a homepage needs to have all the things needed by all visitors, landing pages have specific functions – to convert visitors into regular users through its UX.
There’s a reason most landing pages look alike. While it’s fine to experiment with other patterns, it’s best to stick with a design and navigation process that converts better. The “long sales letter” style is the most common and is shown to convert at much higher rates (as high as 662% more compared to control pages) than shorter pages, especially when calls to action are placed all throughout the page. Sometimes shorter pages do convert better, depending on your product and user base. It’s worth trying both.
Every landing page needs to be tested. The most common and easiest way to test your UX is through A/B testing, where you change and test one element at a time (simultaneously against a control version with nothing changed), giving the clearest picture of what works best.
A newsletter or subscription signup, for example, might only need a field for the email address and possibly a name, which can then lead away to another page for the rest of the details. Or, a landing page could have the whole form. Simplify the page, include more negative space, and make sure the page only includes a single offer or call to action (though they should generally be repeated multiple times).
Icon design
There are many different types of icons, all of which stand for something specific and help a user navigate or undertake actions. These include pictograms, which are images that represent actions: like a map icon for directions. Some are symbols, where an icon represents something else, like stars for ratings or curved lines for WiFi.
Icons help save space on a screen and make it easier to understand things without having to read anything else. They also provide an additional design element and give a break from the text.
It’s tempting to want to design a brand-new novel icon or set to convey familiar ideas. But when the project has a quicker turnaround time and no space for splurging on basics, it helps to stick with specific icons that signify standard functionality.
Take the old floppy disk icon we see everywhere that says “save.” Although nearly out of use, this is a standard of design that has stuck around since the advent of the Web. It’s definitely not the only way anymore to save anything digitally. Using a different icon requires the user to learn something new in the UX, thereby slowing them down as a result.
That doesn’t mean one should cull all creativity. As long as the icon and its function is still instantly recognizable, it’s OK to add your own design.
The need for app design processes
Ideally, it should be possible to design the same website for a variety of devices and provide a quality mobile experience without changing a line of code. But the reality is that a site designed specifically for mobility will always provide mobile users with a much better user experience. Challenges like network costs and delays, memory and CPU limitations, and keyboard and pointing device differences weigh on mobile experiences.
A great web app design process helps with:
- Increase conversions and user satisfaction
- Solving pressing problems in UI/UX
- Staying relevant in an evolving market
- Offer usability and clear navigation hierarchies
- Keep users engaged with an intuitive experience
- Optimal use of resources in validated ideas
Once the main development team is done comes:
- a detailed handoff from the design-to-dev teams
- writing code
- monitoring, reporting and optimizing
Product Story Map
A product story map is a holistic approach to building a shared understanding for teams around a user’s experience with a product. The map is a simple way to tell a product story visually. Stories are arranged top to bottom to help understand the functionality of the system, identify holes and omissions in your backlog, and effectively plan holistic releases that deliver value to users and businesses with each release. It sums up why you’re building the product and what the product and user goals and requirements are. It is an evolving product backlog where stories can be pulled into a sprint backlog.
