UX Design Notes Student 3

UX Design NotesPrinciples of Effective DesignAccessibilityConsistencyUsabilityFeedbackVisualsUser control/priorityPrinciples of Design, Layout, Typography for a Project:• DesignHierarchy that arranges elements based on their importance & guides users through visual cues (ex: headers, subheadings)Contrast that separates important info from other infoBalance between the visuals evenly in layoutEmphasis on key elements through design techniquesRepetition of design design elements• LayoutAlignment of elements on a gird/baselineProximity of related elements close togetherWhite Space (Negative Space)Grid System• TypographyReadabilityFonts with clear letter forms, appropriate font size, & line heightVisual HierarchyFont weights & sizesHighlights important infoConsistencyLimited #'s of fontsFonts that are appropriate to brand identity & tone• MovementDesign using lines, shapes, color patterns, or visual pathways for cohesive flow & engagement• BalanceBalance visual weight throughout the designSymmetrical with mirrored elementsasymmetrical with unevenly distributed elements & balanced visual weight• UnityRepetition of colors, shapes or patterns so design elements work togetherTarget Audiences & Their Most Effective Media SelectionsYoung Adults (ages 18-24)Highly active on social mediaEffectively prefers content that are/have:visually engaginginteractivemobile-first designProfessionals (ages 25-44)Mostly uses professional networking sites, company websites, emailsex: LinkedInEffectively prefers content that are/have:clean interfacesefficient navigationinsights based on dataSeniors (ages 55+)Might use social media and/or emailEffectively prefers content that are/have:Large fontsClear instructionsEasily accessibleParents with Young ChildrenUses parenting forums, kid-related apps, social mediaEffectively prefers content that are/haveIntuitive designRelevant info that is very accessibleMobile friendlyGamersUse gaming platforms, forums, streaming serviceEffectively prefers content that are/have:Responsive controlsImmersive/interactive visualsCommunity featuresVocabulary:White SpaceEmpty areas in the designDesign ElementsColorsFontsPatternsDesign TechniquesColorSizePositionGrid SystemStructure to organize content consistentlyTarget Audiencegroup of people who are most likely to use a product or serviceImage Resolutionnumber of pixels per inch (PPI) in an imagehigher resolution -> more detail & clarity but a larger file sizeLazy Loadingweb design technique that delays loading resources until they're neededAccessibilityAbility to make websites, apps, and digital content usable by everyone, including people with disabilitiesHero SectionMain area at the top of your website’s homepageFaviconSmall icon that appears in the browser tab next to a website’s title helps with brand recognition easier for users to locate your site when multiple tabs are openPrimary NavigationMain menu that helps visitors find their way around your websiteSecondary NavigationAdditional menu supporting/complementing the primary navigation Includes helpful items for usersKerningSpacing between characters in typographyTrackingtypography term refers to the horizontal spacing between letters in a wordOverall spacing in a block of text in typographyQuality AssuranceWay to prevent mistakes in products & avoid problems when delivering services to usersPage Load SpeedMetric that directly affects user satisfactionJavaScriptTechnology that is essential for a dynamic web interactivity Cross-site Scripting (XSS)example of a web security flaw that can impact user experienceEvent Listenerscommonly used to improve navigation in UX designCacheType of memory that lets you store and save data temporarily for later usePublic Domain ContentFree without restrictionsPrototypingTesting concepts and iterating based on user feedback before full developmentSemantic AccessibilityPractice of using meaningful HTML elements (semantic HTML) to structure content on a websiteScreen readers & other assistive technologies can accurately interpret the page's hierarchy and meaningBreadcrumbstrail at the top of a web page that shows a user where that particular page is located & provides a clear path to the homepageImage Resolution, Size, and File Format Roles in Content Design:Low resolution leads to blurry/pixelated imagesAffects visual appeal & professionalismHigh resolution slows down page loading timesLower usability/accessibilityKey Factors in Effective User Experience DesignUser ResearchAccessibility/UsabilityConsistencyFindabilityDesirabilityInformation ArchitectureAdditional NotesPrimary FunctionsARIA roles Define page elements for assistive technologiesSEO meta descriptionsImproving search engine visibility and enticing clicksOthers:Alt text in Accessible Design provide descriptions for search engines and assistive technologiesimprove SEO (Search Engine Optimization) and provide accessibility for visually impaired usersRobustness principle of accessibility ensures that content is robust across different devicesOperabilityprinciple that users should interact w/ product/service using a variety of devices/technologiesInteractivityprocess of creating engaging & intuitive interactions for userskey part of user experiencePerceivabilityprinciple that users should make sure that the info is available in multiple formats (ex: text/audio)Effective UX Design requires collaboration across multiple disciplines, including design, development, and researchHTML Tags:<article>specifies independent, self-contained contentused for Semantic Accessibility<meta charset="UTF-8">define the character encoding for the document<nav>used to define accessibility-focused navigationEase of Navigation and ReadabilityCommon Web Page Layouts & Their Roles:single columnsimple & straightforwardideal for mobile devicespresent in linear fashionfocused, text-heavy contentgood for blog poststwo-columnbetter readabilityenhanced navigationvisually appealingflexibility for content typesused to organized primary & supplementary infogridstructured framework to order elements in a well-defined fashionenhanced information hierarchybetter readabilityresposivenessmore collaborationcardquicker to identify key detailsbetter scanability to find viewer interestsmore flexibility w/ compatibility w/ devicesclear visual hierarchyF-patternmaximize user engagementensure key content is seen firstconvenient for text-heavy pagesbetter visual hierarchyenhance visual scanningZ-patternnatural eye movement which leads to better visual scanninghighlights important element/infobest for visual contentused for call-to-action & capture attentionasymmetrical layoutcreate visual interestguide user's specific interests in elementsmore dynamic design & engaging w/ unexpected placementenhancing the user experience by breaking away from predictable symmetrical layoutsImportance of Readability of Web Content:impacts how users' understanding & engagement w/ info on websitebetter user experienceimproved comprehensionhigher user satisfaction & conversion ratesSerif & Sans Serif Font RolesSerif Fonts:more traditional and elegant appearancesuited for printed materials & logosused for titles/headingsbrand identityhigh readability contentSans Serif Fonts:more cleaner, modern, & approachable appearancesuited for digital interfaces or high readability contentused forbetter screen legibilityclean aestheticbetter accessibility for those with visual impairmentsTerms (Roles in Design & Typography are Highlighted):Serif Font:small decorative strokes at the end of letters aka "feet"Sans Serif Font:cleaner & simple font w/out "feet"Points:areas of focus for user research that are identified by conducting user interviews & analyzing user interactions w/ product/brandLeading:Typography: determining the vertical space between the baseline of one line of text and the next as well as the space between lines of textDesign: ensuring accessible readability by preventing letters from appearing too close togetherKerning:Typography: adjusting space between individual lettersDesign:maintaining visual harmony in uneven letter combosallows a cleaner aestheticTracking:Typography: changing the spacing between characterDesign:creating consistency & better readabilityBaseline Shift:Typography:adjusting the vertical position of text charactersadjusting the vertical alignment of text relative to its baselineDesignemphasizing visuals for a complex layoutaligning text w/ other design elementsAdditional Notes:Single-Page Applications (SPAs)seamless, responsive, and app-like user experience by dynamically updating content within a single web pageeliminates need for full page reloadsfast transitions and immediate feedback to user interactionsappears to be a native desktop programRole of UX DesignTerms:User-centered designA process that aims to produce a design that meets the user's wants & needsSearch Engine Optimization (SEO)Method that aligns content structure with user intent and search performanceMakes it easier for websites to be found through SERPs (search engine result pages)StoryboardDesign that communicates a story or concept via sequenced images that are arranged chronologically to narrate a story’s main eventsUser personaFictional character that represents the key segments of target audience w/ specific behaviors, needs, & preferencesEffective Web Experience in UX Design:Importance:Boost customer/viewer satisfaction & engagementIncrease conversion rates for businessesImprove customers' perception of brandHigher SEO rank/performanceAdaptive web designprovides a custom layout for each device type, improving user experienceFactors:Understands user's needs/wantsIntuitive navigation (website is easily accessible)Accessibility features for those with disabilitiesEx: Screen reader compatibility & color contrastVisual hierarchyFast loading timeClear & coherent call-to-actionImpact of Effective & Ineffective UX DesignImpact & Factors for Effective Design:Simple & straightforward navigation for usersMeets user's needs/wantsHigher search engine rankings (SEOs)High contrast between text and backgroundClear, intuitive navigationConsistent font choices across the websiteConsiders website's displayIncludes functions for different users & those with disabilitiesImpact & Factors for Ineffective Design:Has a lack of understanding of user's needs/wantsHas complicated user interfacesHigher focus on aesthetics over relevant infoConstant distractions for usersGives users confusion/frustrationDecrease users' trust w/ company & brandSEO Techniques:Adjust the # of pages/subpagesUse a simple design/visual hierarchyHave fast loading times (smaller files)Have a simple and easy information architecture (easy to navigate)Utilize location data, local citations, local audiencesAccessibility for people w/ disabilities & all devicesWeb Security in UX Design:Provides websites protection from cyber attacksEasier navigation & interfaceLess secure from attacksHarder navigation & interfaceMore secure from attacksFeatures to Include for Web Security:Shorter registration formsIntegration w/ other platformsSingle-identity loginSimple CAPTCHA authentication measuresSimplified MFA DesignBiometrics (face ID, fingerprints) for authenticationSecure transactions w/out extra stepsCommon Web Security Flaws:SQL InjectionPhishing EmailsCross-site Scripting (XSS)MalwareRandomwareInsider attacksAdditonal Notes:* Triadic Color Scheme: uses three colors that are evenly spaced around the color wheelUX Design ProcessTerms:Empathy: Understanding the user/audience’s needs, expectations, pain points, feelings, frustrationNeed: User's fundamental requirements & expectations when interacting with a websiteIdeation: Creative process where designers develop & communicate ideas to improve user's experience with a websiteRoles in UX Design:Research:Understanding user's needs & pain pointsInform design decisionsThrough surveys and usability testingImprove overall user experienceContextual Inquiry: Observe users in real time Prototypes:Visualizing, testing, and refining designsIdentifies potential issues earlyRefine user flow & interactionGather user feedback & adaptValue:Prioritize user needs/behaviorsIdentify & address user problems/pain pointsMeet user's expectationsProvide a positive user experience & easy accessibilityTesting:Determining user's intuitive design (how easy it is used)Evaluate user's interaction & needsGather feedback for improvementsTypes of Testing:User TestingObserving user's interaction in the websiteHeuristic EvaluationUnderstand how users view informationCard Sorting:Provides a way to better organize information for usersA/B TestingDifferent versions of a designUsed to see which design provides better accessibilityIterativeContinuously improve based on user feedback & testing resultsOverall UX Design Process:Aspects:Researching users & their needs/behaviors/pain pointsDefining problems & user personasIdeating/brainstorming solutionsPrototyping through mockups of design conceptsTesting for an easy user accessibility & experienceGather user feedback & iterateDevelop the final product & launchColor SchemeTerms:Color psychology: A technique used to control users' emotions, decisions, and responsesContrasting colors: Another name for complementary colors that create visual separation and emphasisEx: Blue and orangeComplementary colors: Colors opposite to each other on the color wheel that create high contrastEx: Red and greenAnalogous colors: Colors adjacent to each other on the color wheel that create harmony and a cohesive lookEx: Yellow and greenTriadic color scheme: Color scheme that involves the use of three colors equally spaced around the color wheelMonochromatic color scheme: Different shades of a single hue on the color wheelTone: A color that is mixed with greyBackground-color propoerty: Property that configures the background color of an elementValue: Lightness/darkness of a color relative to other colors around itRole of Color in Content Creation:Provide color psychology:Influencing users' emotions when navigating a websiteConveys consistency & users' first impressionExamples of color psychology used in websitesBlue = calmness and reliabilityEnhance visual hierarchy through contrasting colorsConvey certain messages/call-to-actionsRoles in Content Design:*Contrasting colors:Highlight call to actions & important infoEmphasize certain sections in a websiteImprove readability/accessibilityBetter user experience*Complementary colors:Create strong visual contrastsHighlight key info/focal pointsEnhance visual hierarchyBetter user experience (avoids visual confusion/distractions)*Analogous colorsAdds harmony, rhythm, and unityEvoke certain emotions from usersBrand consistencyEnhance visual hierarchy/accessibilityCareers in UX/UI DesignUX Design CareersUX designers/developers/researchers/writers/strategists/engineersUI designers/developersInteraction/product/service designerInformation architectService designerRelated AreasGraphic DesignPrototypingIndustries impacted by the field of UX/UI designTechnologyCreate intuitive user-friendly interfacesUse web development to create efficient websitesCreate mobile appsUtilize gaming services/experiencesCreate websites for shopping experiencesDesign AR, VR, and AI platformsFinanceOnline banking servicesCreate secure & accessible platformsHealthcareCreate digital tools to enhance patient engagementImprove quality of serviceRetailImprove customer experience in brick-and-mortar stores & online platformsTravelCreate websites/platforms for searching/comparing/bookingGovernmentImprove user experience in government websites/platformsAerospaceImprove flight control systems & other aerospace technologiesManufacturingEfficient productionAccommodations for Special Needs and Related LawsTerms:Accessibility: Ability for products to be used by everyone, especially those with special needs/disabilitiesAlt text & its role: Read by screen readers to provide info about the image to the userImpact of the Americans with Disabilities Act:Legal mandate that prohibits discrimination based on disabilityGuideline that requires websites to be accessible for those with disabilitiesImproved usability & expanded user baseBetter SEO rankingsWebsite Designs for Accessibility & Accommodation of persons withspecial needsSufficient color contrast w/ text & backgroundClear & legible fonts (sans serif fonts)Captions/transcripts for videosLarge interactive elementsClear language/messageAvoid excessive jargon/technical termsSituations where legal elements can be unethical/inappropriateObstruction that makes it difficult for users to make choices that does not benefit for the companyex: obstruction from unsubscribing from a membershipVisual/wording tricks to take advantage of users' expectations for a company's own benefitCopyright, Creative Commons, and Fair UseTerms:Creative Commons Licensing: Legal tools that copyright holders use to allow others to use their content while controlling how they are used/sharedCopyright Licensing: Legal agreement that allows a copyright holder to grant permission for others to use their work while controlling how they are used/sharedFair Use: Limited use of copyrighted material without permission for purposes based on specific factorsEx: news reporting, teaching, researchingSoftware License Agreement: Contract between a software developer and the user that defines the terms and conditions of software usageLicensing Agreements with Software Usage: Defines how software is usedLimits users of how they can manipulate contentProvides ownership/warranties/disclaimers of softwareTypes of Licenses:ProprietaryGrant specific & limited usage rights (ex: modification/distribution)Open SourceGrant broader usage rightsLicensing Restrictions:Creative Commons: Attributionallows others to use/share content as long as they give credit to the creatorNon Commercialrestricts users to use/share content to gain profit or for monetary gainNo Derivativeslimits others to not modify, change, or adapt content to make it their ownShare AlikeCertain licenses require others to put a license on any adaptationsCopyright Licensing:Limit how content is reproduced, distributed, adapted, or preformedLimits others based on where they liveAllows owners to renew/terminate licensesRequires loyalty payments or attributionRole of Public Domain & Qualifications:Role:Creates foundation to allow users to create new ideas/creationsAccess to cultural heritagePromotes educationLow-cost access to infoQualifications:Copyright protection expiresNever meant to have copyrightsFailed to register for a copyrightProcess to Obtain Permission to Use ContentStep 1: Find out if permission is neededStep 2: Research the copyright holder (authors/creators) through the work's publication info, website, or through contacting themStep 3: Write a letter that explains what you are using their content for (ex: video)Step 4: Negotiate and obtain a license agreement (fees & scope of use)Step 5: Follow the creator's advices/instructionsStep 6: Avoid plagiarism