WEBDEV LESSON 1 2ND TERM

Mobile Optimization

App Experience

Convenience converts

Enumerate:

Mobile-First Performance Marketing Strategy

Mobile Optimization

Every screen, button, and interaction is designed for small devices. Ordering, payment, and tracking all work without friction. Customers don't have to think, they just tap. Mobile-first thinking boosted revenue by 63%, showing that convenience directly translates into measurable growth

App Experience

Push notifications aren't spam. They're reminders, rewards, and timely suggestions. App-exclusive discounts make people check the app regularly. Smooth checkout, saved favorites, and one-click payment make ordering feel effortless. It's a full-circle experience that keeps people coming back.

Convenience Converts

Domino's turned mobile into a pocket-sized store. People can order anywhere, anytime. That ease drives engagement, conversions, and loyalty. The phone becomes the main point of sale. The brand isn't just selling pizza anymore, it's selling speed, simplicity, and a habit that sticks.

Spotify

• they have focused on making it easy to use for any user while offering an almost incalculable amount of music content, radio, and podcast.

• The platform has been so well designed and optimized that both the desktop and mobile versions meet users' needs, and users show the same attraction and appreciation for both channels.

• It even surpassed the major streaming power like Apple music, Youtube music, Amazon music

User Interface (UI)

is the collection of visual and interactive elements a user directly engages with - buttons, forms, navigation, typography, color.

User Interface (UI)

is the point of interaction between a human and a computer system, enabling users to operate software or hardware effectively.

User Interface (UI)

the means by which the user and a computer system interact, in particular the use of input devices and software.

Ul Design Process

The __ creates easy-to-use interfaces by learning about users, designing layouts, building prototypes, and testing. Each step makes the product better for users.

Phase 1 - user, tasks, environmental analysis

Phase 2 - interface design

Phase 3 - implementation

Phase 4 - interface validation

ENUMERATE THE 4 PHASES OF UI DESIGN PROCESS

PHASE 1- User, Tasks, Environmental Analysis

• The focus is based on the profile of users who will interact with the system.

PHASE 1- User, Tasks, Environmental Analysis

• Profile users who will interact with the system

• Conduct user research, task analysis, and environmental constraints

• Understand the target audience and usage context

What phase?

PHASE 2 - Interface Design

• Define the set of interface objects and actions

PHASE 2 - Interface Design

• Define interface objects and actions

• Create wireframes, design layouts, establish navigation

• Structure the visual and functional elements

what phase?

PHASE 3- Implementation

• Creation of a prototype (model) that enables usage scenarios to be evaluated.

PHASE 3- Implementation

• Create prototype model for usage scenarios

• Build working prototypes, develop interface components

• Transform designs into testable, interactive models

what phase?

PHASE 4 - Interface Validation

• This phase deals with the testing of the interface

PHASE 4 - Interface Validation

• Test the interface effectiveness

• Conduct usability testing, user feedback collection, performance evaluation

• Validate design decisions and identify improvements

What phase?

1. Graphical user interface (CLI)

2. Menu-driven interface

3. Form-based interface

4. Touch user interface

5. Voice user interface (VUI)

Enumerate the types of user interface design

Graphical User Interface (GUI)

Visual interfaces using keyboards and monitors (e.g., desktop apps).

Menu-Driven Interface:

Navigates via option menus (e.g., ATM interfaces).

Form-Based Interface:

Provides fields for data entry (e.g., settings menus).

Touch User Interface:

Uses haptic input on touchscreens (e.g., smartphones)

Voice User Interface (VUI)

Operates via voice commands (e.g., virtual assistants like Siri).

1. Input controls

2. Navigational components

3. Informational components

4. Visual elements

• Ul design relies on key components to create functional, user-friendly interfaces:

Enumerate the components of ui design

Input Controls

Buttons, dropdowns, and text fields for user input.

Navigational Components

Search bars, sliders, and icons to guide users.

Informational Components

Progress bars, notifications, and alerts to convey status.

Visual Elements

Typography, colours, and graphics to enhance aesthetics and readability.

1. First impression

2. Usability

3. Engagement

4. Business impact

A well-designed Ul enhances user satisfaction and retention:

Enumerate the Importance of Ul Design

First Impressions

Attractive layouts and colors draw users in.

Usability

Clear navigation reduces frustration and errors.

Engagement

Intuitive design keeps users engaged and productive.

Business Impact

Effective Ul boosts user retention and brand perception.

1. Simplicity

2. Consistency

3. Strategic placements

4. Colour and contrast

5. Anticipation

Principles of effective ui design

Simplicity

Avoid clutter; keep interfaces clean and intuitive.

Consistency

Use familiar elements (e.g., standard icons) for ease.

Strategic Placement

Position key elements to guide attention.

Colour and Contrast

Use appealing, accessible colour schemes.

Anticipation

Pre-fill fields or predict user needs to reduce effort.

User experience (UX)

encompasses all aspects of a user's interaction with a product or service, including usability, accessibility, visual design, functionality, and emotional impact

UX design

the goal of __ is to minimize effort and confusion while maximizing satisfaction and efficiency.

UX Design

• Applies to both digital and physical products

• Considers the entire user journey, not just interfaces

• Reduces friction, errors, and frustration

• Enables users to complete tasks easily and effectively

UX design

__ plays a crucial role in product success by improving both user satisfaction and business performance.

1. Improves user satisfaction

2. Increase conversions

3. Reduces development cost

4. Enhance accessibility

5. Support SEO & Marketing

6. Builds brand loyalty

Enumerate the significance of ux design

Improves User Satisfaction

Positive experiences encourage repeat usage and recommendations

Increases Conversions

Clear navigation and intuitive flows help users achieve goals faster

Reduces Development Costs

Early testing identifies issues before expensive fixes are needed

Enhances Accessibility

Makes products usable for diverse abilities and complies with standards

Supports SEO & Marketing

Better UX improves engagement, page speed, and search rankings

Builds Brand Loyalty

Consistent positive experiences create trust and long-term relationships

UX design

ensures products are user-friendly, visually appealing, and meet user needs effectively

1. Usability

2. Accessibility

3. Functionality

4. Aesthetics

5. Interaction design

6. User research

Enumerate the Essential elements of ux design

Usability

Ensures the product is easy to learn and operate

Accessibility

Makes the product usable for people with different abilities.

Functionality

Confirms the product performs its intended tasks reliably.

Aesthetics

Enhances visual appeal and emotional engagement.

Interaction Design

Defines how users interact with systems and controls.

User Research

Identifies user needs, behaviors, motivations, and pain points.

UX DESIGN PROCESS

• is a user-centered and iterative approach aligned with frameworks like Design Thinking and Double Diamond.

1. Discover / research

2. Define

3. Ideate

4. Prototype

5. Test & evaluate

6. Implement & iterate

Enumerate the ux design process

Discover / Research

This stage involves researching and understanding users' needs, goals, and challenges to inform better design decisions.

Discover / Research

• Identify user problems, goals, and pain points.

• Conduct interviews, surveys, and observations.

• Analyze gaps in the existing product.

What ux design process?

Define

• In this phase, research insights are analyzed to define problems clearly, set success metrics, and create user personas and journey maps for guided design.

Define

• Synthesize research insights.

• Define clear problem statements and success metrics.

• Create personas and user journey maps.

What ux design process?

Ideate

The ideation phase focuses on brainstorming and exploring multiple design solutions to select the most effective concepts for implementation.

Ideate

• Explore multiple design solutions.

• Brainstorm workflows, layouts, and interactions.

• Select the most effective concepts.

What ux design process?

Prototype

• Prototyping involves creating wireframes and interactive models to test ideas early, gather feedback, and minimize risks before development.

Prototype

• Create wireframes and interactive prototypes.

• Validate ideas early through testing.

• Reduce risk before development.

What ux design process?

Test & Evaluate

• Conduct usability testing with real users

• Measure effectiveness, efficiency, and satisfaction

• Refine designs based on feedback

what ux design process?

Implement & Iterate

• This phase involves launching the product, monitoring user behavior, and iteratively improving the experience based on feedback and insights.

Implement & Iterate

• Collaborate with developers and stakeholders

• Monitor post-launch behavior

• Continuously improve the experience

What ux design process?

1. Improves user satisfaction Increase conversions

2. Builds brand loyalty

3. Enhance usability

4. Improves user engagement

Advantages of UX

1. Time consuming process

2. Cost of tools and resources

3. Subjective nature

Disadvantages of UX

Ul Design (User Interface Design)

Focuses on the visual elements of a product that users interact with, like buttons, icons, and layouts.

Ul Design (User Interface Design)

Aims to create attractive and intuitive interfaces that are visually appealing

Ul Design (User Interface Design)

Tools: Adobe XD, Sketch, Figma

Ul Design (User Interface Design)

Emphasizes layout, colors, typography, and visual hierarchy.

Ul Design (User Interface Design)

Results in a visually engaging and appealing interface.

UX Design (User Experience Design)

Focuses on the overall experience of a user while using a product, ensuring it is smooth and satisfying.

UX Design (User Experience Design)

Aims to improve usability and satisfaction, making the product easy and enjoyable to use.

UX Design (User Experience Design)

Tools: Balsamiq, Axure, Figma

UX Design (User Experience Design)

Emphasizes usability, functionality, navigation, and overall flow.

UX Design (User Experience Design)

Results in a seamless, satisfying user experience.

Don Norman's Principle of Design , The Design of Everyday Things

__ - Six foundational principles from __ that focus on how people understand and interact with systems. Together, they reduce guesswork and make actions feel predictable.

1. Visibility

2. Feedback

3. Constraints

4. Mapping

5. Consistency

6. Affordance

UI/UX Layout Theory (Don Norman's Principle of Design)

Visibility

Make possible actions visible so users don't have to guess what to do next. When key actions are hidden, users rely on memory or trial and error.

Feedback

Show the result of an action immediately so users know what just happened. Without __, users repeat actions or assume nothing worked.

Constraints

Limit what users can do at a given moment to prevent errors. Good __ remove invalid options rather than warning after the fact.

Mapping

Align controls with their effects so the outcome feels predictable. When __ is unclear, users must learn arbitrary relationships instead of relying on intuition.

Consistency

Use the same patterns for similar actions so users don't have to relearn behaviour. Inconsistency forces users to stop and think.

Affordance

Design elements so their use is obvious from their appearance. When __ are unclear, users rely on labels or guesswork.

heuristics

Jakob Nielsen's 10 general principles for interaction design. They are called "__" because they are broad rules of thumb and not specific usability guidelines.

1. Visibility of system status

2. Match between the system and the real world

3. User control and freedom

4. Consistency and standards

5. Error prevention

6. Recognition rather than recall

7. Flexibility and efficiency of use

8. Aesthetic and minimalist design

9. Help users recognize, diagnose, and recover from errors

10. Help and documentation

UI/UX Layout Theory (Jackob Nielsen)

Visibility of System Status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Match Between the System and the Real World

The design should speak the users language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

User Control and Freedom

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

Consistency and Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Error Prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

Recognition Rather than Recall

Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.