User Interface and Experience Design

user interface (UI)

the point of human-computer interaction and

communication in a device. This can include display screens, keyboards, a mouse and

the appearance of a desktop. It is also how a user interacts with an application or a

website, using visual and audio elements, such as type fonts, icons, buttons,

animations and sounds.

interface (UI) design

process designers use to build interfaces in

software or computerized devices, focusing on looks or style. Designers aim to create

interfaces which users find easy to use and pleasurable.

Graphical User Interface (GUI)

Voice-Controlled Interfaces (VUI)

Gesture-based Interfaces

Formats of UI

Graphical user interfaces (GUIs)

visual systems

that let users interact with digital devices through

elements like buttons, icons, and menus.

Windows:

Icons:

Menus:

Buttons:

Toolbars:

Text fields:

Scrollbars, sliders, tabs:

Dialog boxes:

Anatomy of Graphical

User Interface (GUI)

Windows:

Frames or panels where content appears.

Icons:

Small graphic representations of tools or actions.

Menus:

Lists of commands or options.

Buttons:

Clickable elements that trigger actions from users.

Toolbars:

Sets of frequently used tools or commands.

Text fields:

Input areas where users can enter information.

Scrollbars, sliders, tabs:

Navigational aids.

Dialog boxes:

Pop-up interfaces for messages or inputs.

Voice user interfaces (VUIs)

allow the user to interact

with a system through voice or speech commands. Virtual

assistants, such as Siri, Google Assistant, and Alexa, are

examples of VUIs.

Gesture-based Interfaces

refers to using specific physical gestures

in order to operate an interface. You can already interact with

your phone without using the keypad by swiping, tapping,

pinching, and scrolling.

Page layout

Color Scheme and font selection

Interactive Elements

Wireframe and prototype fidelity

UI Design Considerations

User Experience (UX)?

refers to the overall experience a

customer or user has when interacting with a product, system or service. UX

aims to create a consistent, positive, and accessible experience that considers

the needs and expectations of a broad audience rather than of just one

individual.

User experience (UX) design

process design teams use to create

products that provide meaningful and relevant experiences to users. involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

User Interface (UI)

refers to the interactivity,

look, and feel of a product screen or web page,

User Experience (UX)

covers a user’s

overall experience with the product or website.

Accessibility

concerned with whether all users are able to access

an equivalent user experience.

Usability

concerned with whether designs are effective, efficient

and satisfying to use.

Empathy

User Research

Inclusivity

Control and Navigation

Principles of Accessibility in UX Design

Visual (e.g., color blindness)

Motor/mobility (e.g., movement coordination concerns)

Auditory (hearing difficulties)

Seizures (especially photosensitive epilepsy)

Learning/cognitive (e.g., dyslexia)

Types of Accessibility Issues

Include personas with varying abilities.

Use header tags in text.

Use alt text on content-enhancing images.

Have a link strategy.

Improve visibility with careful color selection and high contrast.

Reference shapes to help guide users.

Consider how screen readers handle forms.

Offer transcriptions for audio resources, captions/subtitles for video.

Make content easily understandable

Practical Guidelines for Accessibility

Prototyping

iterative process of

quickly building a simplified version of a

product or system to test ideas, gather

feedback, and refine the final solution.

done before the development

of the product to get clear solutions to

improve the product.

Fidelity

refers to the level of detail and

functionality of a prototype.

Low-Fidelity Prototypes

Mid-Fidelity Prototypes

High-Fidelity Prototypes

Fidelity Prototypes:

Low-Fidelity

Prototypes

Basic, often hand-drawn representations of

a product's interface or flow, focusing on the

core concept and user journey rather than

visual details.

Mid-Fidelity Prototypes

Bridge the gap between low and high

fidelity, offering a more interactive and

detailed representation. They typically include

some visual design elements and basic

interactions.

High-Fidelity

Prototypes

Closely resemble the final product, with

detailed visuals, interactions, and animations.

They aim to simulate the actual user experience

as closely as possible.