UI/UX: A basic understanding for the developers

Explains the basics of UI/UX process

UX

What UX is? UX simply means user experience. It includes everything related to all the interactions that a user has with a company, its services and products. How does something like a remote control, a phone, an app or a website feel to use? How do you feel before, during and after interacting with the product? Can users achieve what they want easily from a product? Does the interface provide a smooth, enjoyable experience, making your users feel in control? Why do customers keep coming back for more?

You don't want your users to be confused about why nothing happens when they click or tap a button. Considering and designing for the user and not what you think the user wants are key to successful UX.

Moreover, UX is a process with several stages. Also, usability issue is different from design issue.

To understand what UX really is, it's important to recognize that UX has been refined into a process which you will explore in more detail later. But let's get a quick overview of it, so you have an idea of what the process involves. The process is iterative, you may have to go back to previous steps to adjust your design to suit the customers and business goals several times. If you are designing something, you observe people doing the task. And from that you can identify problems that they may have completing that task. You then may have some ideas to work on. Then you prototype your intended solution and test it. This is the process in summary. You repeat each of these stages and the steps within them and test your design again and again until you have something that is usable and enjoyable for everyone. Following these steps and considering best practice methods and behaviors in current Web and product design will help you redesign the order form of the Little Lemon website.

UX: Needs and wants

You need to think about aligning the customer's goals with Adrian's business goals. In this video, you will learn to recognize UX goals, how to consider applying these to your thinking, and the user design process, and to identify Nielsen's usability quality components

Usability gauges how intuitive or easier product is to use. Jacob Nielsen's, a highly recognized professional in the field of usability, proposes that you can evaluate usability through five usability components. They are learnability, efficiency, memorability, errors, and satisfaction. Let's start with learnability. When his customers are trying to order for delivery, Adrian wants the process to be easy to learn from the first time they do it. The second component is efficiency. What if users want to change their order? Is it easy to do, and can they do it quickly and efficiently? Third, comes memorability. What if a user gets distracted? Is it easy to remember where they were when they return? How quickly can they find where they were? Next, go to usability needs to consider errors. What if a user makes a mistake? The design should provide solutions to these mistakes and address them before they happen. Finally, comes satisfaction. Is the website pleasant or satisfying to use? Do users enjoy using it? Is it easy to use?

You can organize your experience goals into desirable and undesirable aspects:

Desirable: ou want your product to be enjoyable and fun to use. You also want your design to be relaxing, satisfying, and efficient. You will surely want your customers to be engaged, motivated, and stimulated.
Undesirable: you won't want them to have to think too hard to use your product. It should be intuitive. On the other hand, you don't want your website or app to be slow, confusing, or complicated to use. You don't want your customers to feel bored, frustrated, or stressed

For, example, when reserving a table at Little Lemon, costumer's needs to know if the table is available and how long they can reserve it for. Can your design provide this information to the user so they can feel supported and empowered? Is the information presented clearly without being annoying? Suppose a customer is using crutches and would like to sit by the door. Could your design potentially satisfy this requirement? If not, can the user find this information easily enough if they need to? Although you have not implemented any design yet, you are considering your users goals and needs, and thinking about ways you can help them satisfy these through your design solutions.

Artifacts in the UX process

Artifacts are documents that design teams create to gather, organize and present information throughout the UX process. This includes user personas, scenarios, user stories and storyboards.

User personas

A user persona is a model or character that portrays a possible user of your website or app. Personas aid the design team in focusing on the end users while designing a product. Personas help a product team constantly focus on their target users, ensuring that the designed product fits their needs and requirements. Multiple user types can engage with a website or app. Developing user personas helps determine the range of users, their age group, sociometric position etc. User research is the first step in creating a user persona. UX designers can understand users' behavior and motivations by observing them and designing accordingly. A few user research methods are conducting customer interviews, making assumptions, and using web analytics.

Conducting customer interviews: Interview at least five people. After conducting several interviews, you'll notice that you're getting very little or no new information. That means you don't need to interview any more users. Also, make use of whatever information you already have. You may have some thoughts on your customers. Whether you have previously conducted research or you know something for sure.
Making assumptions: If you've been working on a product for quite some time. You may have enough information to make reasonably accurate assumptions about your customers. Just make sure to back them up later with research.
Using web analytics: Web analytics tools are an excellent resource for quantitative data, so make the best of them. They can tell you how your customers behave but not why. You'll still need to talk to them to find out what motivates them.
Creating a customer persona group: Once your research is complete, you divide the information into customer persona groups which will then be consolidated into single-user personas, concentrating on the primary needs of the most important user group and one significant pain point.irst, add a header to your persona; this includes a fictional name, an image, a demographic profile and a quote that summarizes what matters most to your persona. These features ensure your persona is memorable and helps the design team focus on whom they're designing for. Add a personal background, a mini-biography of sorts. Then you create a psychological profile such as the user's needs, interests, motivations, and pain points. This allows you to understand better why your user behaves in a certain way, including why they need or want to use your product. For Tilly, in the above example, it would be for expediency. When creating user personas, remember to focus on the context of the product you're designing while you want to build up a realistic character. There's no need to include pointless details that won't influence the final design.

User stories

A user story is a brief statement or abstract that describes the user and their need or goal. It establishes who the user is, what they require, and why they require it. Each user persona typically has one user story. User stories usually adhere to a straightforward template:

As a (type of user), I want (a goal) for (some reason).

Type of user: This is the end-user or the user's role in the application software. For example: "As an online banking customer."
A goal: This is the action taken by the user on the application software. For example: "I want to add a payee to my account."
Some reason: - The outcome or desired value the user expects from the action performed. For example: "so that I can transfer money to the payee."

In this example, the user story is:

"As an online banking customer, I want to add a payee to my account, so I can transfer money to the payee."

User stories assist in documenting helpful information about users, such as the various needs and motivations for using a website or app. They also help the development team estimate the timeline required to deliver the final product.

Scenarios

A scenario is a situation that depicts how users interact with your website or app. Scenarios describe the user's motivations for being there (their task or goal) and a question they need to be answered. They also suggest possible ways to achieve these goals. Scenarios are essentially an extension of the user story and can be applied to various target users. However, they can also be divided into use cases, which describe the sequence of tasks that any given user performs in a provided functionality or path.

For example, a scenario could describe how the user transfers money to a payee using a mobile device on his way to work. Scenarios help stakeholders visualize the design team's ideas by providing context for the intended user experience — frequently bridging communication gaps between creative and business thinking. Scenarios aid the design team in imagining the ideal solution to a user's problem.

Scenario mapping is the first step in scenario planning. The design team, developers, and product owners gather to discuss ideas and design a plan centered on their user personas. They think about the critical task that the user hopes to achieve after defining the primary user through persona development. The following step is to conduct a scenario analysis, contextualize the user's goals and walk through the steps the user would take.

Storyboards

A storyboard is a visual representation of how a user will interact with a product. Designers can create different storyboards: sketches, illustrations and screenshots, slideshows and animations, or live demos.

Storyboarding is an excellent method for visually communicating design concepts to teams, stakeholders, and end users. Visualizing a design idea with an interactive storyboard, like high-fidelity prototypes closely resembling the final product, will help the audience remember, empathize, and connect with it.

How to create a storyboard?

To create a storyboard, set the scene by defining:

Your persona,
The environment (where the persona is) and
The plot (what they want to achieve).

Then you begin to sketch out the basic idea for each scene and build it up with as many interactions as you want.

UX process

The five stages of the UX process are empathize, define ideate prototype and test. It is important to keep in mind that UX is an iterative process which means you may have to go back to the previous stage to adjust and refine it.

Empathize: You get permission to interview and observe Adrian's customers at various stages of trying to complete tasks on the restaurant website like ordering a meal for delivery. You want to listen to their frustrations. The key here is to understand your user's needs. From the results of this research, you can create a persona that you can then reference throughout the design process. You will also create an empathy, map a scenario and journey map to empathize more with this persona. This will also keep your ideas grounded so to avoid making assumptions.
Define: You collate and distill all of the information collected from your users and identify the key problems and needs that they are having. You also prioritize these frustrations or pain points by importance. You now know who your users are, what their frustrations are and what problems you need to solve. You will create a user needs statement that clearly outlines the needs your users have.
Ideate: Once you know the issues and who you're solving for, you can ideate. Ideating is about generating ideas. You can do this by sketching, brainstorming, mind mapping and even handwriting notes. The key here is to keep an open mind and not commit to one specific idea and this may be iterated throughout the design process. To iterate is to reflect on your work and refine and improve your design. You will sketch out your ideas into something that will address the little lemon customers needs. You will then develop them into wire frames. A wire frame is a two dimensional representation of the user interface which is concerned with the placement and hierarchy of content the functionalities that are offered. And the expected actions that users will take.
Prototype: Next comes the prototype, which is a simulation of the final product. You have iterated and refined your ideas into a fresh new solution but you cannot assume it will work for everyone and release it just yet.
Test: Since UX is an iterative process based on user and client feedback, you may also have to iterate at this stage. So your ideas are constantly being refined into something approaching a final design solution. Then you will test your design, the testing stages where you present your solution to users and get their feedback. You create a test script with some clear instructions focusing on achieving a task or tasks. Your test participants, customers in this case, interact with your prototype while trying to achieve the task at hand. Any frustrations can be communicated and highlighted at this stage and you can go back and address them before the next stage of the process.