Design – What is design??

Color Psychology in UI/UX Design: How Colors Can Affect User Behavior

On June 28, 2024

In Branding, Color Theory, Design, Psychology

Color psychology is the study of how colors influence human behavior, emotions, and perceptions. This field explores how different hues and shades can affect mood, decisions, and even physiological responses.

Emotional Impact:

Red:
Passion, Urgency, and Excitement
Red is a powerful color that evokes strong emotions. It’s often associated with passion, energy, and urgency. Red can increase heart rate and create a sense of excitement, making it a great choice for call-to-action buttons, sale announcements, and notifications.

Uses:

Call-to-Actions: Use red for buttons to grab attention and encourage immediate action.
Sale Promotions: Highlight discounts and special offers with red to create a sense of urgency.
Example: Amazon frequently uses red for their “Limited Time Offer” and “Deal of the Day” banners to prompt quick user action.

Blue:
Trust, Calm, and Reliability
Blue is a calming color that is often associated with trust, reliability, and professionalism. It’s widely used in corporate and tech industries to convey stability and dependability.

Strategic Use:

Corporate Websites: Utilize blue in logos, headers, and backgrounds to build trust.
Financial Services: Apply blue tones to create a sense of security and reliability.
Example: PayPal uses blue in its logo and interface to build trust and convey a sense of security for financial transactions.

Green:
Growth, Health, and Tranquility
Green symbolizes nature, growth, and health. It’s a refreshing color that promotes relaxation and balance. Green is commonly used in industries related to health, wellness, and the environment.

Strategic Use:

Health and Wellness: Incorporate green to promote a sense of well-being and calm.
Environmental Campaigns: Use green to emphasize sustainability and eco-friendliness.
Example: Whole Foods Market uses green extensively in their branding to highlight their focus on natural and organic products.

Yellow:
Optimism, Happiness, and Attention
Yellow is a cheerful and uplifting color that evokes feelings of happiness and optimism. It’s also an attention-grabbing color, making it effective for highlighting important information.

Strategic Use:

Highlights and Accents: Use yellow to draw attention to key information or features.
Positive Messaging: Apply yellow to create a warm and friendly atmosphere.
Example: McDonald’s uses yellow in its branding to evoke a sense of happiness and friendliness, encouraging a positive association with their brand.

Purple:
Luxury, Creativity, and Wisdom
Purple is often associated with luxury, creativity, and wisdom. It’s a sophisticated color that can add a touch of elegance and exclusivity to your design.

Strategic Use:

Luxury Brands: Use purple to convey high quality and exclusivity.
Creative Industries: Incorporate purple to inspire creativity and innovation.
Example: Cadbury uses a rich purple in their packaging to signify luxury and high quality in their chocolates.

Black:
Power, Elegance, and Sophistication
Black is a powerful color that exudes elegance, sophistication, and authority. It’s a versatile color that can create a strong visual impact and convey a sense of luxury.

Strategic Use:

High-End Products: Use black for premium product lines to emphasize luxury.
Minimalist Designs: Apply black in minimalist designs for a sleek and modern look.
Example: Apple uses black in its product designs and marketing to convey sophistication and high quality.

White:
Simplicity, Purity, and Cleanliness
White represents simplicity, purity, and cleanliness. It’s often used in minimalist designs to create a sense of space and clarity.

Strategic Use:

Clean Layouts: Use white space to improve readability and focus on content.
Healthcare and Tech: Apply white to convey cleanliness and modernity.
Example: Google uses a lot of white space in their search interface to keep the focus on the search bar and results, ensuring a clean and user-friendly experience.

Color Therapy

Color Therapy is a complementary therapy that uses colors and light to treat physical and emotional conditions. Each color is believed to have its own energy frequency and vibration, which can affect the body’s energy centers, or chakras, promoting healing and balance. The concept of chakras comes from ancient Indian traditions and refers to seven energy centers in the body:

Red: Root chakra, related to grounding and survival.
Orange: Sacral chakra, associated with creativity and sexuality.
Yellow: Solar plexus chakra, linked to personal power and digestion.
Green: Heart chakra, connected to love and healing.
Blue: Throat chakra, related to communication and expression.
Indigo: Third eye chakra, associated with intuition and insight.
Violet: Crown chakra, linked to spirituality and enlightenment.

This approach helps designers create visually appealing and user-friendly interfaces that align with the intended mood and purpose of the application. For example, calming blues and greens may be used in healthcare apps to reduce stress, while vibrant hues like red and yellow can evoke energy and urgency in e-commerce interfaces. Thoughtful color choices can guide user attention, improve readability, and create cohesive visual hierarchies that make interfaces intuitive and engaging.

User Engagement: How users interact with digital interfaces
Contrast: High contrast between text and background colors is essential for readability, especially for users with visual impairments. For instance, using dark text on a light background or vice versa ensures text is clear and legible.
Hierarchy: Color is used to establish visual hierarchy within interfaces. Designers employ colors to differentiate between primary actions, secondary information, and tertiary details. For example, using a bold, vibrant color for primary buttons (like ‘Buy Now’) draws immediate attention and prompts user action, while softer or less saturated colors might be used for less critical elements like navigation links or secondary buttons.

Brand Identity
Consistency: Using brand colors consistently across all platforms and interactions reinforces brand identity and builds user trust.
Example: Coca-Cola
Coca-Cola’s use of consistent red and white colors across all branding from logos to advertisements establishes immediate brand recognition and builds consumer trust worldwide.
Personality: Colors can reflect brand personality traits. For example, vibrant colors might be used for a youthful brand, while muted tones could be selected for a luxury brand.
Example: Chanel
Chanel employs a timeless color palette of black and white to convey sophistication and exclusivity, appealing to luxury consumers who value elegance and high-quality craftsmanship.

Accessibility

By Isao

On June 18, 2024

In Accessibility, UI/UX

Getting support for accessibility efforts isn’t easy.

Things To Keep In Mind

🚫 You can’t build empathy with facts, charts or legal concerns.
🚫 People often dismiss concerns that they can’t relate to.
🚫 People often don’t know how accessibility applies to them.
🚫 People often assume that accessibility is dull and boring.
🚫 Business often neglects it as an irrelevant edge case.

✅ Nothing is more impactful than seeing users struggle.
✅ Bring users with disabilities for testing to show accessibility.
✅ Ask for small commitments first, then progress from there.
✅ Accessibility isn’t expensive nor tedious if done early.
✅ But it can be very expensive when retrofitted or done late.

🚫 Don’t mistake polite nodding for agreement or commitment.
✅ Anticipate objections about costs, competition, and slowdowns.
✅ Make a business case for lower costs and increased revenue.
✅ Create a roadmap with actions, timelines, roles, and goals.
✅ Set up regular accessibility testing (e.g. every 6–8 months).

“But Accessibility Is An Edge Case!”

❌ ”But accessibility is an edge case. Given the state of finances right now, unfortunately we really can’t invest in it right now.”

🙅🏼‍♀️ “I respectfully disagree. 1 in 6 people around the world experience disabilities. In fact, our competitors [X, Y, Z] have launched accessibility efforts ([references]), and we seem to be lagging behind. Plus, it doesn’t have to be expensive. But it will be very expensive once we retrofit much later.”

“But We Don’t Have Disabled Users!”

❌ “Why should we prioritize accessibility? Looking at our data, we don’t really have any disabled users at all. Seems like a waste of time and resources.”

🙅🏼‍♀️ “Well, if a product is inaccessible, disabled users can’t and won’t be using it. But if we do make our product more accessible, we open the door for prospect users for years to come. Even small improvements can have a high impact. It doesn’t have to be expensive nor time-consuming.”

“Screen Readers Won’t Work With Our Complex System!”

❌ Our application is very complex and used by expert users. Would it even work at all with screen readers?”

🙅🏼‍♀️ “It’s not about designing only for screen readers. Accessibility can be permanent, but it can also be temporary and situational — e.g. when you hold a baby in your arms, or if you had an accident. Actually it’s universally useful and beneficial for everyone.”

Accessibility is important for everyone, and it’s important to be relatable.

Reducing cognitive overload: designing for human cognition

By Isao

On June 18, 2024

In Psychology, UI/UX

In today’s world of information overload, it is essential to minimize the mental effort required to interact with a system. This effort, known as mental interaction cost, includes the cognitive effort involved in interacting with a system, considering timing, clarity, and user context. It can be broken down into three components: attention, memory, and conceptual models. Attention is related to the visibility and discovery of key elements, memory involves maintaining consistent and recognizable interaction patterns, and conceptual models focus on creating associations and cues for users through design models. By considering these components, user experience designers can create interfaces that are more intuitive and less mentally taxing for users. This is essential for optimizing user satisfaction and efficiency.

Designing for Behavior Change

Fogg Behavior Model

In order to enhance user experience, it is crucial to have a deep understanding of and the ability to influence user behavior. The Fogg Behavior Model serves as a framework for comprehending how behavior is influenced by three key elements:

Motivation (Low or High): This provides a reason for someone to engage in a task.
Ability (Hard or Easy to do): This determines how feasible it is for people to complete a task.
Triggers: These are environmental or internal prompts that encourage a person to take action. Examples include onboarding tips, call-to-action buttons, and notifications.

The behavior occurs when users have both motivation and ability. If motivation is low, increasing ability can help. Here are some strategies we can apply the Fogg Behavior Model in our design initiatives:

Simplifying Interfaces

Reduce the complexity of tasks by breaking them down into simpler steps.
Ensure that users can easily understand and complete actions with minimal effort.

Increasing Motivation

Use persuasive design techniques to improve user engagement.
Highlight benefits and value to maintain high motivation levels.

Effective Triggers

Design clear and timely notifications that prompt users at the right moment.
Utilize easy-to-find and understandable CTA buttons.

Cognitive Overload: The “Black Box” Scenario

It’s important for designers to recognize that our brains can only process so much information at once. When users are presented with an overwhelming amount of choices or information, they can become confused and feel stuck. This becomes even more challenging with “black box” interfaces, which are like magic tricks – the user triggers an action without understanding how or why it happens. When users don’t have a clear understanding of how things work, it makes it even more difficult for them to make sense of the information being presented to them.

Remember this: The most important aspect here is feedback. Whenever you take an action, the system should respond with a clear thumbs up, thumbs down, or something in between. This feedback should be immediate, easy to understand, and appropriate for the situation.

You should prioritize clear and concise messages. For example, instead of simply displaying a green checkmark, a message could say, “Your file has been uploaded successfully.”

Handling cognitive load

Cognitive load refers to the mental effort required to complete a task. It is important to reduce cognitive load in order to improve efficiency. This can be achieved by simplifying interfaces, removing unnecessary elements, and providing immediate feedback.

Amber Case’s principles of “calm technologies” seamlessly integrate into everyday life, offering functionality in a non-intrusive manner and promoting a harmonious relationship between humans and technology.
Principles of Calm Technology

To create effective user interfaces, it is important to understand and apply the core principles of calm technology.

These principles guide designers in developing systems that seamlessly integrate into users’ lives, optimizing functionality without overwhelming them.

Clarity in communication: Ensure that the interface effectively communicates its purpose and functionality, using clear text, icons, and symbols.
Consistency and recognizable patterns: Maintain consistent layout, colors, and typography to help users apply their prior knowledge and create an intuitive user experience.
Responsive feedback: Provide appropriate feedback for every user action, whether through simple animations or more complex messages, to ensure that users understand that their actions have been acknowledged.
Minimizing cognitive load: Simplify processes, reduce the amount of presented information, and highlight key elements to help users focus on the most important aspects.
Predictability and intuition: Follow design conventions and use familiar elements to align with users’ mental models.
Flexibility and efficiency of use: Cater to both novice and experienced users by offering customizable interfaces and shortcuts to increase efficiency.

Modular RAG – Three-layer structure of module types, modules, and operators.

By Isao

On June 18, 2024

In AI

The RAG flow encompasses the entire working process within the RAG system, from the input query to the output generation of text. This process typically involves the coordinated work of multiple modules and operators, including retrievers, generators, and possible pre-processing and post-processing modules. The design of the RAG flow aims to enable Large Language Models (LLMs) to utilize external knowledge bases or document sets when generating text, thereby improving the accuracy and relevance of responses.

The process of RAG inference generally follows these patterns:

Sequential: Linear process, including both advanced and simple RAG paradigms
Conditional: Choosing different RAG paths based on query keywords or semantics
Branching: Including multiple parallel branches, divided into pre-retrieval and post-retrieval branches
Loop: Including iterative, recursive, and adaptive retrieval structures

Below is a flowchart of the Loop mode in RAG:

Basic RAG

The input module receives the user’s query, the retrieval module retrieves relevant documents from the knowledge base, and the output module generates answers based on the retrieval results.

Adding a Reranker Module

Basic RAG to reorder the retrieval results.

Adding a Query Rewrite Module

Added a reranker module to the query pipeline, which is a post-processing operation on the retrieval results. Now, we will add a query rewrite module to perform pre-processing on the query.

Sentence Window Retrieval

The process of sentence window retrieval works as follows: When a document is segmented, it is split into sentences and stored in a database. When retrieving relevant sentences, the retrieved sentences alone are not considered as the retrieval result. Instead, the sentences before and after the retrieved sentence are also included. The number of sentences included can be specified using parameters. Finally, the retrieval results are sent to the LLM to generate the answer.

Evaluation Module

Ragas is a framework used to evaluate RAG applications, providing numerous detailed evaluation metrics.

GIST Framework

By Isao

On June 11, 2024

In Product Design

GIST stands for Goals, Ideas, Steps, and Tasks:

Goals: Align with the objectives in OKRs.
Ideas: All ideas we can test to achieve those goals.
Steps: Validation methods to test our ideas, ending with recalculating priorities using ICE scores.
Tasks: Team tasks to execute each step.

The system is called GIST after its main building blocks: Goals, Ideas, Step-projects, and Tasks. Each has a different planning horizon and frequency of change, and may use different tools to track, but together they constitute all the core planning any company and team needs to do.

Rethinking MVP

This form of planning is a ton of work — just getting all stakeholders to agree is a massive undertaking, yet ROI is very low. The plans quickly go out of sync with reality

The planning cycle

Planning with GIST is multi-tiered and iterative:

Goals are typically set for an horizon of one or more years — this is where we want to encourage long-term thinking. They are defined at the beginning of the year and evaluated and adjusted every quarter — we don’t want to pursue stale goals.
Ideas are constantly collected and prioritized. We never stop looking for new ideas.
Step-projects are defined at the beginning of the quarter. The team picks the goals and ideas it wishes to pursue this quarter, and defines step-projects accordingly. The quarterly step-project list (typically stored in a spreadsheet or database tool) is evaluated and reprioritized every 1–2 weeks, in sync with task iterations planing.
Tasks are planned in 1–2 week iterations in per the teams’ preferred dev method, for example Scrum sprint planning, and adjusted daily.