User Experience
Design is not just what it looks like. Design is how it works!
What is UX?
User experience is how a person feels when interacting with a system. This includes a website, mobile application, desktop software and basically any form of human-device interaction.
Why is Ux necessary?
User experience is important because it tries to fulfill the user’s needs. It aims to provide positive experiences to keep a user loyal to the product or brand.
ux v/s ui
UI stands for User Interface. UI is all about the visual design and interactivity of the application/product.
UX stands for User Experience. UX is all about strategy and analysis.
Design process
UX design process involves:
Empathising with the userUnderstanding the user requirementsCreating user personas and journeysDeveloping Wireframes and prototypesTesting and analyzing
quadrant model
UX specializations tend to fall into one of 4 categories commonly referred to as the Quadrant model.
Experience StrategyUser ResearchInteraction DesignInformation Architecture
laws of ux
UX laws can be defined as "The collection of laws or design standards that designers must take into account when thinking and improving the user experience".
bad ux and good ux
For any website to be successful, it doesn't only have to look attractive but it should be user friendly and seamless to use. A good website is about making it easy to use and navigate through quickly for the users.
What is UX?
User Experience, as the name suggests is a user focused product design methodology. UX is all about what, when, where, why, how and who uses the product/service. UX focuses on adding components in order to enhance the experience by making the product more Usable, Accessible, Findable, Desirable and Valuable. UX is all about designing something that's easy to use. Functionality should come before form.
The term was coined by Don Norman, cognitive scientist at Apple in the year 1990.
User Experience isn't focused only on the technical stuffs. Users come into the picture for any product or service that's present in the market. Take for example a steering wheel, it was designed to make steering a car a comfortable and valuable experience. In order to create the optimum product we need to carefully answer the following basic questions:
1. Who the customer is?
2. What their challenges are?
3. How can we solve them?
ux v/s ui
UI stands for User Interface. An interface is something that helps a human interact with a machine/application/product to achieve a particular goal. For example, steering wheel of a car, handle of a mug, mobile screen, etc.
UI is all about the visual design and interactivity of the application/product. The main focus is on the product and how it looks. Take for example in the computer world, colors, typography, graphics, layouts, padding, size, animations, etc fall under the UI hood.
UX stands for User Experience. An experience is how a user feels while using any product. Whether the product is usable, useful, desirable, findable, valuable and accessible. UX is all about strategy and analysis. How are the customers responding to the product, is the fundamental question to be answered.
Design strategy, user research, user personas, user journey, wireframing, prototyping are some of the tasks achieved under UX.
design processes & tools
UX design process involves basically the following 5 stages:
1. Problem statement & strategy:
Understand the problem statement and develop a strategy aligning the business goals along with the goals of the users. A problem statement is one or two sentences that describes the problem that the product or service is trying to address. The problem statement should outline why the problem is an issue, as well as identify the impact of the problem. A framework that can be used to draft a problem statement is the 5 W’s Framework: WHO, WHAT, WHEN, WHERE and WHY
Who is impacted by the problem? What happens when the problem occurs? When does the problem occur? Where does the problem occur? Why does the problem occur?
2. User Research:
This stage comprises of interviewing, user personas, user journeys and user flows to understand the customers who'll be using the product or service. 1:1 interviews and surveys help to frame a basic idea about who our users are and let us identify the requirements.
Based on the information gathered by interviewing, we need to create user personas. A user persona is a fictional yet realistic representation of the target user. Customer personas are a great tool for helping to understand your customer, their behavioural patterns, their needs and what they are trying to achieve. User journeys and user flows map the whole journey of a potential user starting from how they get to know about the product to fulfilling their needs.
3. Wireframing:
Wireframes are the 2D drawings of the pages in your app or website. It defines how the items in the page should be organised, what content goes where, what functionalities are available, etc. This helps organize your ideas and gain clarity about how the final product should be laid out.
4. Prototyping:
Prototyping is the process of turning ideas into tangible products using various design tools like Sketch, Figma, Adobe XD, Zeplin, etc. Exploring different designs, discussing with the developers about technical constraints and further consulting the users for their feedback to decide whether the product is to be accepted, improved, redesigned or rejected.
5. Analyze & Test:
In order to tackle unknown problems and the changing user requirements, the design/prototype is tested and analyzed to obtain recommendations and overcome technical constraints, if any.
Note: Design process changes based on the company, size of project, team, and other factors. The process may not always go in a sequential fashion and some steps may be repeated as and when required.
Web design tools
quadrant model
UX design is not merely one thing. Say for eg, would you you go to the same doctor for every time your body decided to act up? No. You'd go to a dermatologist for problems with your skin, an opthamologist for problems with your eyes, etc. Similarly big companies will have their own teams of specialized UX designs. UX specializations tend to fall into one of 4 categories commonly referred to as the Quadrant model (the 4 quadrants can overlap depending on the skills involved and the roles required). The 4 quadrants include:
1. Experience Strategy
ExS is the most business oriented. It's all about bringing together requirements from both the design and business side of the project. It is meant to ensure that the companies business values, customer needs and technical capabilities match up and also helps to keep the team's attention and resources by keeping them focused on solving the right problems for target users. The role of the product manager typically falls under this quadrant along with other roles like product lead and product designer.
2. User Research
UX research is the process of gathering insights about your users in order to make smart design decisions. Here you'll learn about your user's needs, goals and pain points to validate and invalidate your own assumptions and continuously test the usability of your design. The data gathered throughout the research process may be quantitative or qualitative and attitudinal or behavioral.
In simple terms quantitative data is anything measurable, for example "How many users visited a certain page on your website?", "What percentage of visitors made a purchase?", etc. This helps to put a number on the usability of your product and compare different designs. Qualitative research on the other hand focuses on the reasons or motivations behind such actions, for example "Why did the user click?", "Why didn't they purchase?", etc.
Attitudinal vs behavioral, in other words distinguishing between what people say and what they do. Attitudinal research gets the user to report certain info about themselves. Perhaps a user would like a specific feature to be added, they can tell you this (instead of simply watch them interact with a product). Behavioral research refers to any direct observation method and seeks to understand what people do in a given real world situation.
3. Interaction Design
This is all about creating seamless interactions between a system and it's users. It focuses on integrating experience strategy, user research and information architecture into an intuitive interface and user flows that people can use in their sleep. Roles such as interaction designer, product designer and experience designer fall under this quadrant.
4. Information architecture
IA is the science of organizing and structuring content of the website, web app, mobile app, etc. Here the aim is to organize the content so that the user can easily adjust to the product's functionality and can find everything without exerting much effort. The product has to be easy to navigate, logical and user friendly.
laws of ux
UX laws can be defined as "The collection of laws or design standards that designers must take into account when thinking and improving the user experience".
1. Aesthetic Usability Effect
Users often perceive aesthetically pleasing design as design that’s more usable.
2. Doherty Threshold
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
3. Fitt's Law
The time to acquire a target is a function of the distance to and size of the target.
4. Hick's Law
The time it takes to make a decision increases with the number and complexity of choices.
5. Jakob's Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
6. Law of Common Region
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
7. Law of Pragnanz
People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.
8. Law of Proximity
Objects that are near, or proximate to each other, tend to be grouped together.
9. Law of Similarity
The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
10. Law of Union Connections
Elements that are visually connected are perceived as more related than elements with no connection.
11. Miller's Law
The average person can only keep 7 (plus or minus 2) items in their working memory.
12. Occam's Razor
Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.
13. Pareto Principle
The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.
14.Parkinson's Law
Any task will inflate until all of the available time is spent.
15. Peak-End Rule
People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
16. Postel's Law
Be liberal in what you accept, and conservative in what you send.
17. Serial Position Effect
Users have a propensity to best remember the first and last items in a series.
18. Tesler's Law
Tesler's Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.
19. Von Restorff Effect
The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
20. Zeigarnik Effect
People remember uncompleted or interrupted tasks better than completed tasks.
For more information visit: Laws of UX
bad ux and good ux
For any website to be successful, it doesn't only have to look attractive but it should be user friendly and seamless to use. A good website is about making it easy to use and navigate through quickly for the users.
Some of the characteristics of a good website would be:
1. Mobile Compatibility with Responsive Web Design
For example, a responsive web design allows customers to have a consistent ecommerce website experience across any device they choose to use while shopping–whether desktop, tablet or mobile.
2. Flat Design = Clean & Focused Design
Clean design gives a page the breathing room it needs to offer a compelling call to action for engagement. Focused design can help showcase products—such as large and detailed imagery that a customer needs to make their decision to buy now.
3. Organized & Easy-to-use Navigation
Always make the navigation prominent and super organized.
For example, ecommerce website best practices to consider for search:
Offer auto-complete suggestionsAllow for search by product name, and model number
4. Visuals
The best way to describe what’s offered is using:
High resolution photosClose detail shotsProduct video360° view
5. Accessible to all users
A good website should be accessible to everyone including people with partial or complete blindness, elderly, etc.
6. Faster loading
A study by Akamai found that 40% of the customers abandon a web page if it takes more than 3 seconds to load. While a sudden spike in traffic can slow down a website and make it unresponsive, cloud services provide ways to provide greater bandwidth, computational power and storage to overcome the traffic.
7. Forms
Useful feedback and referral forms can be generated to allow users to interact with the site. Such forms should be easily accessible and understandable.
What makes a Website Bad?
Some of the characteristics of a bad website are listed below:
1. Extremely slow loading
If your website contains too many images, too many third party websites, excessive use of CSS and JS, large files, then it leads to painfully slow loading of the site.
2. Impossible to find Help or Contact us
When the users are unable to find what they need or their requirements have changed they would want to contact the service provider. But this becomes impossible if the "help" option is lying somewhere buried or is missing completely.
3. Lack of proper architecture
If the website functionalities and features aren't organized in a easy to find and understand fashion, you might lose out on valuable customers. For example, easy to find navigations, filtered search, consistent CTA(Call To Action) buttons, etc.
4. Lower cognitive load
The website should reduce the cognitive load and provide better clarity. For example, in ecommerce allow the users to store products in a cart, provide simpler maps rather detailed one's which are difficult to understand.
For some fun try this game out: Can't Unsee