UX Designers help with product development and their other day-to-day tasks, read on to learn more. I will discuss the role of UX Designers in the workplace and break down the everyday work of these creative and empathetic tech professionals.
Design Process
User Experience (UX) Design is the process of making products, websites, apps, and services enjoyable and easy to use. Every product we interact with has a user experience that accompanies it. A UX Designer’s job is to make sure the user experience is a good one. What qualifies as a good user experience? It’s pretty simple— a good user experience will have a mix of desirability, usability, and usefulness. A talented UX Designer will possess traits like empathy and creativity to put themselves in the shoes of the user. They’ll also be an excellent critical thinker.
What are the Components of UX?
What are the roles & responsibilities of UX designers?
Consulting with clients to understand their goals
Explaining user research results to internal and external stakeholders
Conducting competitor and customer analysis
Developing personas and usage scenarios
Creating wireframes, storyboards, sitemaps, and screen flows
Creating product prototypes
Analyzing user feedback and activity, and iterating to enhance the user experience
Assisting with content and assets development
Conducting UX auditing to fix all the bug
What happens in the Discovery workshop phase?
Team members and key stakeholders converge to understand the current state and build consensus for plans for the upcoming project.
Gather existing knowledge from clients of stakeholders
Understand business requirements
Build agreement across the project supporters
What happens in the Empathy workshop phase?
Designers, researchers & other stakeholders create a shared understanding of user needs before designing a solution.
Shift perspective from features-first to its user first
Gain clarity on user needs, motivations, and behaviors
Build empathy mapping for users
What happens in the Design workshop phase?
Cross-disciplinary team members gather to rapidly generate and discuss a wide set of ideas from various perspectives.
Brainstorm ideas for a specific design challenge
Broaden perspective beyond the design team
Foster shared ownership of a product or UX vision
What happens in the Prioritization workshop phase?
Team members and other key decision makers come together to decide which items are most important and prioritize them.
Prioritize features in order to shape a product roadmap
Understand which internal initiatives are most important
Balance feature overload or fight against scope creep
What happens in the Critique workshop phase?
Roles Integral to the design process collaborate to analyze and improve a design so that it meets its objectives.
Understand how well designs support existing principles
Evaluate designs or content with user need as a lens
Hear feedback from team members outside of design
Why is learning important in life?
Continuous learning is the concept of always expanding knowledge to gain new skills, expertise has several positive knock-on problem-identifying and problem-solving abilities.
___
This page is a learning library for me and trying to make things easier and simpler to understand with supporting examples with visuals and stating things in the storytelling.
__
Heuristic Evaluation
Heuristic evaluation helps optimise usability by minimising design deficiencies. It thus guarantees the effectiveness of the interface of a digital device, such as a website, a mobile application, or SaaS software. It has 10 principles which is easy to remember.
Heuristic 10 principle defined with examples.
Grid
Grid systems are aids designers use to build designs, arrange information and make consistent user experiences. They include the rule of thirds, golden section, single-column, multi-column, modular, baseline, and responsive grid systems. For example, responsive adapts content to screen size and orientation, for consistency.
INTRODUCTION OF A 12-COLUMN GRID
“Web design 12 column grid” is the best design. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40-pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.
USE OF 12-COLUMN GRID
Developers use a “web design 12-column grid” that will help break up the text, photos, and illustrations. For websites, our designers can have 2–12 or even 16 columns that span the width of a landing page. They can place text and images within just one column or they can span across multiple columns.
EXPLANATION OF COLUMN GRIDS
Column grids are used to organize elements into columns. Text and images in a column grid are placed following the vertical lines and flow lines that make up the columns. Images can be placed inside one column, or across two or more to create a different visual layout.
WHY GRIDS MATTER IN WEB DESIGN
Grids help give shape and hierarchy to web design. Without them, you would have no idea where to place your design elements. We need them to create a good user experience so a user knows how to navigate through a website and find what they need.
Grids also help when it comes to responsive design. While the desktop experience of a landing page might use multiple columns to span text and images across, the design needs to be flexible enough to condense down well to 2–3 columns on a table and 1 column on a mobile device.
TYPES OF GRIDS
There are 5 main types of grids. Some are better than others for web design, but you have likely used all 5 at one point in your design career.
1. Baseline grid
2. Manuscript grid
3. Column grid
4. Modular grid
5. Pixel grid
6. Hierarchical grid
A baseline grid is a bit more technical, it’s defined by where the text sits. Essentially, it’s the leading or spacing between the baselines. This grid helps to create a good experience for the reader, especially where there is a lot of text to read. While it’s most important for print design like book layouts.
A manuscript grid is a foundation for all books, newspapers, and magazines. Also known as a single-column grid, it’s one of the simplest grid structures and is good for large continuous blocks of text and images. Basically, it’s a large rectangle area inside the page, like a bounding box for the text.
Gutters are the space between columns. Not all column grids have to be symmetrical. For example, it’s the best thing that our designers can utilise an asymmetric column grid where some are thinner while others are wider which can be useful depending on the hierarchy of design. Asymmetrical column grids are commonly used on blog websites where the main content is in the larger two-thirds container of the layout, while the smaller third may be a sidebar that includes information about the blog and the writer.
Modular grids are similar to web design 12-column grid, column grids but differ with the addition of rows. You’ll find newspapers and magazines use modular grids quite a bit to organize content but they can also be used on a website or app design, such as in a product grid section.
The YouTube homepage is another example of a modular grid in use. While they utilize a sidebar on the left for common links like the trending and subscriptions section, all video content is organized into a 4 column modular grid to maximize how many videos a user can browse while scrolling for something to watch.
If you’ve ever zoomed in close to a Photoshop document, you might have seen a pixel grid pop up. Digital screens are made up of a microscopic grid of millions of pixels, and sometimes designers get in close to edit images pixel-by-pixel.
Hierarchical grids are most commonly found in web design. The purpose of these grids is to arrange elements in order of importance. They can be a little more flexible but they still use columns, rows, and modules to help with organization. They are created organically by placing the most important objects on the page first and then creating a grid around them.
News and media-related sites tend to use this type of grid to help draw attention to some articles and post more than others. Focus on this example of how The New York Times uses a hierarchical grid on its homepage.
Card Sorting
Card sorting is a UX research technique in which users organize topics into groups. It helps to formulate the Information Architecture and meet the expectation of the users.
How this method targets the audience’s domain knowledge is structured, and it serves to create an information architecture that matches users’ expectations.
Let's understand this by example;
Ola offers a car rental service. It offers around 40 vehicle models that customers can choose from.
Here the question arises how would you organize those vehicles into categories that people can browse to quickly find their ideal car rental?
Ola company might use technical terms such as family car, executive car, and full-size luxury car.
But users might have no idea of the difference between some of those categories.
This is where card sorting can help.
Open Card Sorting
Closed Card Sorting
Hybrid Card Sorting
Testing existing IA & website structures to see if they work as expected. Categorized information needs input to re-arrange if it is not placed in order.
Flexibility is a priority. One can give category examples to participants while allowing them to add their own.
Benefits of the Card Sorting
1). Facilitates sitemaps ranking and optimization
2). Show users' concept of information hierarchy
3). Helps you to discover the mental model
4). Provide smoother navigation for the user
Usability
Usability can be described as the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience.
Usability is a combination of factors including Intuitive design: a nearly effortless understanding of the architecture and navigation of the site. Ease of learning: how fast a user who has never seen the user interface before can accomplish basic tasks.
Nielsen divides usability into five elements, so-called attributes, which can be measured and used to specify usability objectives. They are
1). Learnability may sound like one's ability to learn – but when it comes to UX design, it refers to how easily your product can be learned.
2). Efficiency measures the speed and how quickly users can accomplish the tasks once they have become familiarized with an interface.
3). Memorability is a measure of how easy a website is to remember after a substantial time-lapse between visits.
4). Errors prevention alerting a user when they're making an error, with the intention to make it easy for them without making a mistake.
5). Satisfaction The final usability attribute, subjective satisfaction, refers to how pleasant it is to use the system.
Usability involves...
Accessibility
When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently, many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use.
Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility.
perceive, understand, navigate, and interact with the Web
contribute to the Web
"The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect."
What are the four major categories of accessibility?
There are four main guiding principles of accessibility upon which WCAG has been built. These four principles are known by the acronym POUR for perceivable, operable, understandable, and robust.
Perceivable
When we talk about a web page’s perceivability, we’re referring to the user’s ability to identify content and interface elements through the senses. Many users rely on their visual senses to perceive this information, but this is not the case for everyone. For others, perceivability may be through sound or touch, while some emerging technologies may also involve sensory cues for smell and taste.
Text Alternatives
One of the tenets of perceivable accessibility is ensuring that there are text alternatives for all non-text content. This is the best way to provide content for users who rely on large print, braille, speech, symbols, or simpler language. It should be concise and evoke the same kinds of experience as the non-text content. For example, a picture of a decadent chocolate cake should have alternative text that is as sumptuous and irresistible as the picture.
Audio and Video Accessibility
An alternative should be available to present equivalent information so that this content is available to everyone who needs to access it, which may include captions, descriptive text, or sign language.
Operable
Operability refers to the way the user navigates your website. Operability accessibility means that your users can use the controls, buttons, navigation, and all other interactive elements on your site. While for many users, this means that they can identify an interface control visually, they click, tap, or swipe, other users use a keyboard or voice commands as the only way they can operate, navigate, and control your website.
When content is operable, it should be navigable beyond the use of a mouse or trackpad and should be operable using a keyboard interface without the need for the specific timing of individual keystrokes.
Adjustable Timing
Another important element of operable accessibility is timing. Users should be able to pause, stop, and resume automatic updating information with one keystroke, and interruptions can be postponed or stopped. Additionally, users should be able to continue their activity even after a timed re-authentication or timeout without losing the data they’ve inputted.
There are many other standards for operability accessibility, including details like ensuring that nothing on a website flashes more than 3 times per second, making content friendly for those who have seizures or seizure disorders, the size of link targets, and including section headings to describe and organize the content.
Understandable
When technology is understandable, it’s consistent with how it’s presented and formatted. There is a predictability to the website in how it is designed and used. Understandability is all about remaining constant. It’s concise and matches the voice and tone of the audience so that users can comprehend the content and easily learn and remember how to use the interface.
There are all kinds of guidelines to follow to keep your website understandable for all users. These include:
Providing supplemental content for any content that’s above a lower secondary education level
Offering explanations and expanded forms for all abbreviations
Sharing definitions and expanded meanings for unusual words, jargon, and idioms
Identifying the pronunciation of words when the meaning of the word isn’t identifiable without knowing the pronunciation
Establishing consistent navigation regardless of how your content is accessed
Helping users avoid input mistakes and offering corrections when they happen, and making submissions reversible to correct errors
Roboust
Accessible technology should also be robust, which means that it’s not only standards-compliant but also that it’s compliant with all technologies. This way, users can interact with your websites, online documents, multimedia, and other content on the technology of their choosing.
For a website to be robust, markup languages, start and end tags, and all other elements should be “nested” according to their specifications. This helps make the information understandable with accessibility accommodations understandable no matter what. You’re working to ensure that your content is well-formed so that it can be understood by screen readers and other user agents. ROBU
Design System