UX Design FBLA

EFFECTIVE DESIGN PRINCIPLES

UNIT 1

1. **User-centricity**

putting the user’s needs first and making decisions based on what you know about them and what they want from the product.

2. Consistency

By being consistent with what your users expect, you’ll create a product that’s easy to use, with a very low learning curve for the user. That’s a key part of ensuring a smooth user experience.

3. Hierarchy

Hierarchy shapes and helps the user in navigating a product and how easy or complicated the process is. Visual hierarchy considers how individual elements are laid out on a page or screen (more important elements can be emphasised by placing them at the top of the page or screen, using larger font or using different colours) It draws attention to the most important pages and elements, ensuring they can easily find what they need.

NOTE:

Information architecture refers to the sitemap; the overall structure and organization of your website or app and how the user navigates from one page or screen to another.

4. Context

Context considers the circumstances in which your product will be used, who uses it and how certain factors might impact the user experience. Having context makes it easier to see product limitations.

Questions to ask self: What device(s) might people use to access and interact with my product? Where might the user be? Are there factors such as noise that might interfere with the experience? What kind of emotional state are they likely to be in?

5. User control

Gives the user the right amount of control over how they interact with a product (for example, helping users to correct or reverse errors without throwing the entire user experience into disarray - undo and redo, cancel and other alternative actions for different paths or reverting).

6. Accessibility

Accessibility is about ensuring your product or service is accessible to and usable for as many people as possible. It includes catering to the needs of people with disabilities, as well as understanding how different environments or situational factors might impact the user experience (alt text).

7. Usability

A measure of how easy a product is to use.

5 parameters: (Learnability, Efficiency, Memorability, Errors, Satisfaction)

\- Learnability: How easy is it for users to get to grips with your product the first time they use it? Things like consistency and information architecture can enhance the learnability of a product.

\- Efficiency: Does the design of the product allow the user to complete their desired tasks quickly and efficiently?

\- Memorability: When users come back to the product after a while of not using it, is it easy for them to re-familiarise themselves with how it works?

\- Errors: How many errors do users typically make when using the product and how severe are these errors? Is it easy for users to recover from errors? This relates to the principle of user control.

\- Satisfaction: Is it pleasant and enjoyable for users to engage with the product? Does it provide a satisfying user experience, or a frustrating one?

EASE OF NAVIGATION AND READABILITY

UNIT 2

website bounce rate

the percentage of people who land on one of your web pages and then leave without clicking anywhere else

1. Predictability/ Simplicity

use creativity sparingly in designs and nav, confusing systems will increase WBR

2. Overused minimalism

Do not use too much white space or minimalistic typography. It does allow for faster load time but again, do not overdo it as that does not allow for clean and proper nav.

3. Consistency

Theme, design and structure should be cohesive, and flow into each other in terms of nav, shouldn’t change every time

4. Hierarchical Structure

Navigation menus should have a clear hierarchical structure with every category and clickable sub categories included in the menu. Adds clarity as long as all pages/functions are organized and listed.

5. Managebility

Ensuring user knows where they are on the site, how to return and go forward from there. This is where breadcrumb navigation is very useful. Additionally, breadcrumbs present an SEO opportunity to make your site more search engine friendly. ADDS TO USER CONTROL

6. Links + Multiple Nav bars

You can link logo to homepage for ease of access (users have a tendency to click on home to restart their research process so make it easy for them to get to). You could ad multiple nav bars, one in the footer, one up top.

7. Sitemaps

Sitemaps are crucial for a usable *navigation* system. Any lost user will resort to a sitemap that has links to all pages (or the main pages) of a website. The site map will list down the pages of your site in a clear, hierarchical order giving a plain overview of your website.

8. Search Bars

Always include one to allow easier navigation. Search bars are extremely necessary for making your website’s search interface more usable.

READABILITY

UNIT 3

1. Use visual and semantic space

Space is an important visual design tool that helps us identify groups of related content and delineate unrelated content.

2. Provide the right amount of space between lines of text

For most content work, the interline spacing (line-height) is applied automatically

3. Clean typography

Avoid changing the typeface from that specified by the website (consistency). Also try not to underline or use all caps. Readability is reduced with all caps because all words have a uniform rectangular shape, meaning readers can't identify words by their shape. Leave underlines for links.

4. Use left-aligned text.

A consistent left margin makes reading easier.

5. Allow text-resizing

Check how your content responds to enlarged text. Avoid using narrow columns of content because they will not respond well to scaling.

ACCESSIBILITY

UNIT 4

Universal Design

benefits both disabled and nondisabled users

Americans with Disabilities Act (ADA), 42 U.S.C. § 12101 *et seq*

Title III of the ADA prohibits discrimination against an individual “on the basis of disability in the full and equal enjoyment of the goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation….” Discrimination includes denial of participation as well as provision of separate, but unequal, goods or services. “Public accommodation” is defined to include operations that “affect commerce;” the law provides 12 general categories of covered businesses such as hotels, restaurants, places of entertainment, sales and rental establishments, service establishments, places of recreation, and places of education. The law also requires affirmative “reasonable modifications” of “policies, practices, and procedures” to make them equally accessible. (still needs to pushed for private companies)

California’s Unruh Civil Rights Act and Disabled Persons Act

which are at least co-extensive with the ADA in terms of scope and permit damage awards. These monetary damage awards are even more incentive for a business to make their websites accessible than the standard consequence under Title III of a court compelling a website to be made accessible. The Unruh Civil Rights Act also makes it illegal to aid or abet discriminatory activity, which implicates the actions of website designers as well as website owners.

enhance site

allow user controls to change text size, color, dark and light mode, contrast, alt text, image resizing. Use CSS styling

COLOR SCHEME

UNIT 5

Color Associations

Base colors

white, black and gray are universal colors

White in Cultural Context

Western cultures, white is associated with things like purity, innocence, and hope. But in parts of Asia, white is associated with death, mourning, and bad luck.

Brand Values

Colors should match Brand values. Correct contrast and vibrance must carry brand message

Red

Red is the color of danger and passion, as well as excitement. It’s a very strong color and can elicit strong reactions in people. Lightening it to pink makes it more feminine and romantic while darkening the hue to maroon makes it more subdued and traditional

Orange

Orange is a very creative color that’s also associated with adventure and youth. It’s very energetic, too. Because of orange’s strong ties to 70s style, it can also evoke a retro feeling.

Yellow

Yellow is happy, optimistic, and cheerful. It’s popular in designs for children and adults alike. More pastel hues are often used as a gender-neutral baby color, while brighter yellows are popular in creative designs. Darker shades of yellow become gold, which is associated with wealth and success.

Green

Green has varied associations. On one hand, it provokes feelings of wealth and tradition (particularly darker hues), while on the other it’s strongly associated with environmentalism and nature. Lime greens are often associated with renewal and growth.

Blue

Blue is most often associated with loyalty and trust. Brighter blues can be affiliated with communication, while duller and darker blues can be associated with sadness and depression. Blue is the most universally liked color in the world, which may explain why so many companies opt for blue shades for their branding.

Purple

Purple is another hue with varied meanings. It’s long been associated with royalty and wealth (since purple dye was rare in many ancient civilizations, it was reserved for royalty). But it’s also associated with mystery and spirituality. Purple can also evoke creativity.

Black

Black implies sophistication and luxury. It can also be tied to sorrow and negativity, however. Depending on the other UX colors being used alongside black, it can feel modern or traditional, formal or casual.

White

White is tied to purity, innocence, and positivity. White is also very popular in minimalist designs, due to its neutrality and simplicity. Like black, white easily takes on the characteristics of other colors it’s used with.

Gray

Gray has varied meanings, depending on context. It can be conservative and sophisticated or dingy and dull. It can be emotionless or moody. It can also be associated with sorrow and sadness.

Brown

Brown (which is actually a dark shade of orange) is associated with being down to earth and grounded. It’s also associated with nature and even coziness. And, of course, it can be affiliated with being dirty or dingy.

Unconventional UX colors

Usually used for accents and stuff

60-30-10

60% of base color/ neutral

30% of complementary colors

10% accent colors

Primary, Secondary, Tertiary

Primary (red, blue, yellow) Secondary (mixes of primary colors) Tertiary (or intermediate – mixes of primary and secondary colors)

Hue, Chroma, Lighting

Hue – How it appears (e.g., “is green”). Chroma – How pure it is: i.e., if it has shades (black added), tints (white added) or tones (grey added). Lighting – How pale or saturated it appears.

Color Scheme

\

MOBILE AND DESKTOP RESPONSIVE WEB DESIGN

UNIT 6

What is responsive web design?

Responsive design is an approach to web design in which the interface adapts to the device's layout, facilitating usability, navigation and information seeking. Responsiveness is possible thanks to media queries, allowing the design to adjust automatically to the browser space to ensure content consistency across devices, and design elements being sized in relative units (%). Most commonly used for device switching.

Why is it so popular?

Designers could craft several versions of a design optimized for different devices and make each have fixed dimensions (adaptive design approach). They could work on a single, flexible design that would stretch or shrink to fit the screen (responsive design approach). Website made to fill other screens.

Benefits:

* Reach a larger audience: nowadays, more users access the web through mobile devices.
* Save time and development efforts since designers and developers only focus on one design version.
* Improve SEO, as search engines reward mobile-friendly websites with better search positions.
* Ensure brand and design consistency across devices, as there is no chance to modify guidelines to fit different design boxes.

Fluid Grid System

In interaction design, multi-column, hierarchical and modular are the most widely-used types of grids. The principle of a grid is simple: every element occupies the same percentage of space, however large or small the screen becomes, which means that the components can be scaled up and down as the user switches devices.

Fluid Images

images that scale to fit their container. SVG files are light and do not lose quality when enlarged.

Media Queries & Breakpoints

Media queries are filters that detect the browsing device's dimensions and make your design appear appropriate regardless of the screen size. To aid media queries, you have breakpoints: these are the values where the content of your website will be rearranged to provide the user with the best possible experience. Usually defined in CSS code. Commonly, designers use three sizes when designing responsive websites: 1024 & upwards, 1023-768, and 767-320 px.

6 things for optimal responsive design

1. Assuming a mobile first mentality (catering to phone users as it is the most common device)
2. Use SVG files
3. Including 3 or more break points
4. Aim for minimalism
5. Prioritize and hide content to fit users needs (hierarchy)
6. Ensure consistency and accessibility

COPYRIGHT, CREATIVE COMMONS, AND FAIR USE

UNIT 7

Copyright law

protects the intellectual property of the creator. You don’t, in most countries, need to register copyright. It comes into existence at the moment you create something.

Fair Use

Copyright clause in which you use someone else’s work, modify their work, or derive something from their work. Fair use provisions generally apply to educational use, commentary, criticism, reporting, study or research.

5 points to evaluate fair use

1. How was it used (what purpose)?
2. Nature of the work (what was it)?
3. Amount of work used?
4. Financial impact of the work?
5. Was it transformed?

Creative commons

Creative Commons licenses are applied by the copyright owner to their own works. These are the most prominently used licenses of their type in the world.

ROLE OF UX DESIGN

UNIT 8

What is the role of UX design?

To improve user interactions with product

UX DESIGN PROCESS

UNIT 9

Process (5-8 steps)

* Research
* Define the user problem
* Design
* Prototype
* Validate
* Build
* QA Test
* Launch

OR

Empathize

Research

Analyze

Prototype/Design

Validate/Test

Empathize

* **Stakeholder interviews:** interviewing key stakeholders to gather insights about business goals.
* **Value proposition mapping:** thinking about the key aspects and value propositions of the product: what it is, who will use it, and why they will use it. Value propositions help the team and stakeholders create consensus around what the product will be and how to match user and business needs.
* **Concept sketching**: creating an early mockup of the future product (can be low-fidelity paper sketches of the product’s architecture).

Product Research

* **Individual in-depth interviews (IDI).** A great product experience starts with a good understanding of the users. In-depth interviews provide qualitative data about the target audience, such as their needs, wants, fears, motivations, and behavior.
* **Competitive research.** Research helps UX designers understand industry standards and identify opportunities for the product within its particular niche.

Analysis

* **Creating user personas.** Personas are fictional characters that represent the different user types for your product. As you design your product, you can reference these personas as realistic representations of your target audience.
* **Creating user stories.** A user story is a tool that helps designers understand the product/service interactions from the user’s point of view. It’s usually defined with the following structure: “*As a [user] I want to [goal to achieve] so that [motivation].”*
* **Storyboarding.** Storyboarding is a tool that helps designers *connect* user personas and user stories. As the name suggests, it’s essentially a story about a user interacting with your product.

Design

* **Sketching.** Sketching is the easiest and fastest way to visualize our ideas. You can do this by drawing by hand on a piece of paper, on a whiteboard, or in a digital tool. It’s very useful during brainstorming sessions because it can help the team visualize a broad range of design solutions before deciding which one to go with.
* **Creating wireframes.** A wireframe is a tool that helps designers visualize the basic structure of a future page, including the key elements and how they fit together. Wireframing acts as the backbone of the product, and designers often use them as a foundation for mockups and prototypes.
* **Creating prototypes.** While wireframes are mostly about structure and visual hierarchy (the look), prototypes are about the actual interaction experience (the look and feel). A prototype is like a simulation of the product and may be low-fidelity (clickable wireframes) to high-fidelity (coded prototypes).
* **Creating a design specification.** Design specifications contain all of the visual design assets required for developers to turn prototypes into a working product.
* **Creating design systems.** For large projects, designers typically create a system of components, patterns, and styles that help both designers and developers stay on the same page regarding the design.

Testing

* **“Eat your own dogfood.”** Once the design team has iterated the product to the point where it’s usable, it’s time to test the product in-house. Team members should try using the product on a regular basis, completing routine operations to uncover any major usability flaws.
* **Testing sessions.** User testing sessions with people who represent your target audience are very important. There are many different formats to try, including moderated/unmoderated usability testing, focus groups, beta testing, and A/B testing.
* **Surveys.** Surveys are a great tool for capturing both quantitative and qualitative information from real-world users. UX designers can add open-ended questions like “What part of the product you dislike?” to get user opinions on specific features.
* **Analytics.** Quantitative data (clicks, navigation time, search queries, etc.) from an analytics tool can be very helpful to uncover how users interact with your product.

Careers in UX

UNIT 10

UX vs. UI

While UX encompasses the overall experience a user has with a product or service, UI focuses on the graphic design and interface.

Skillset needed

* Communication skills will help you effectively interview users and present your solutions to clients or management.


* Empathy allows you to think about problems and solutions from the user’s point of view.


* Collaboration skills empower you to work in harmony with your team, taking feedback, exploring solutions, and leveraging expertise.


* Critical thinking encourages you to challenge your assumptions and innovate new solutions.


* Research, including the use of interviews, surveys, and observation, guides you to make the best decisions in the design process. 


* Information architecture helps you organize and prioritize large and complex sets of information.


* Wireframing (building a skeletal framework for a website or app) enables you to explore design solutions in an efficient way.


* Prototyping is essential for testing functionality and identifying problems.
* Programming is always good

Researchers

work on the Research and Validate stages

* Conduct research like interviews, surveys and focus groups.
* Analyse the research data to uncover what the main problems are.
* Define the scope of the problems to make sure the right things are prioritised.
* Present their findings to the wider team.

Content Experts

ensure the copy and design are aligned at each stage

UX Manager

A UX designer that has experience in managing and leading a team

UX Designers

lead the Design and Validate stages but play an important role throughout

UI Designers

will work with UX designers on the Prototype and Validate stages

UX Writers

UX writing is the creation of all the copy you see, hear or encounter when using a digital product and UX writers specialise in crafting copy that will help the user understand and navigate through the product. This means writing things like microcopy, calls to action and error messages based on user needs instead of marketing goals.

UX Architect

Like UX writers and UX researchers, information architects (who may also be called UX architects) are specialists. They’re concerned with organising and structuring the information and content throughout a product’s design stages. They determine the navigation across the product, the hierarchy of the product’s pages and the way pages are structured, all with the goal of ensuring the user’s journey is smooth and logical.

UX Strategist

A UX strategist is a UX designer who also understands how to utilise and implement business strategies. They’re often responsible for defining business goals in conjunction with clients and stakeholders and deciding on a strategy for the content available in a product that balances user needs with business requirements.

Product Designer

a product designer should have the added responsibility of focusing their attention on the goals of the product they’re designing. This means along with completing UX designer tasks, they also take on the responsibilities of a project manager, such as steering the project development process from beginning to end.

Product Manager/ Product Owner

Concerned with product business

Developers

come in at the Validate stage, where they turn prototypes into live products

TYPOGRAPHY

UNIT 11

Typeface

**Typeface**: Also known as a font family, the word “typeface” comes from physical print and refers to the faces of physical letter blocks. A typeface is composed of fonts—much like an album is composed of tracks or a book is composed of chapters. A typeface includes multiple font weights, and its style is shared across all characters, numbers and symbols. Arial, Times New Roman and, yes, even Comic Sans are all typefaces. 

Font

Fonts are specific weights within a typeface. You choose a typeface; you use a font. If you were to select Georgia as your typeface, then Georgia bold, italic and regular would be your fonts. In other words, a font is the distinct, stylized characteristics found within a typeface. You’ll likely use 2-3 fonts per project, and they’ll be the foundation of your typography and a key element of your overall design. 

Baseline

the invisible line on which all letters rest. You can create a grid using the baseline of your chosen type to create a harmonious layout.

X-Height

the distance between the baseline and the height of the lowercase letter “x”. If you are working with a font that has an unusually large (or small) x-height, it could impact the entire interface—sometimes even breaking the layout. 

Serif

the stroke, or foot-like element, connected to the end of some typefaces’ main strokes. Serif fonts are often more readable, as the tiny “feet” guide the readers’ eyes to the next character. However, due to their tiny size, they may not always render well on screens. 

Sans Serif

a typeface without strokes or any extra elements at the bottom of a letter. Owing to the lower resolution of screens, sans serifs are often preferred for digital interfaces. As technology improves and screens come equipped with better resolutions, this may no longer be a deciding factor in choosing a font.

Weight, height, size

This refers to the thickness, length and overall size of a typeface. You can experiment with different weights and sizes and use the variations judiciously on your interface to break the monotony on long passages of text, or to direct attention to specific elements.

Ascender and Descender

the vertical stroke that extends upward beyond the x-height and downward beyond the baseline, respectively. 

Alignment

refers to how text is positioned. There are 4 main alignments: left, right, centered and justified. Alignment helps designers to create a coherent composition

Hierarchy

the principle of arranging elements according to importance. Creating a strong hierarchy is paramount to helping users identify where to look first. No matter the screen size, if an interface has multiple elements, it is important to guide the user towards the most important elements of the screen. Your choice of font, its weight, size, letter spacing, alignment and surrounding white space, along with other visual design elements, work together to create this hierarchy.  

5 Principles

1. Do not use too many typefaces
2. Use typefaces that compliment and contrast
3. Keep readability and accessibility in mind
4. Ensure that there is visual hierarchy
5. Make it scabale (fluid design for mobile users)

HTML, CSS, JAVASCRIPT

UNIT 12

CSS Stuff

please use your pdfs to study html and css syntax :)

101 TERMS TO KNOW

UNIT 13

Above/below the fold

“Above the fold” refers to content that is visible at the top of a website; the user doesn’t need to scroll to see it. “Below the fold” refers to content further down the page which the user would need to scroll in order to see. In UX, it’s important to put meaningful, important content above the fold (for example, a header).