[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"writing":3},[4,627,851,1017,1161,1331,1346,1889,2484,2500,2720,3459,3764,3852,3985,4110,4509,4677,4878,4932,4994,5064,5118,5225,5278,5371,5424,5477,5640],{"id":5,"title":6,"body":7,"date":615,"description":616,"extension":617,"head":618,"imageUrl":619,"meta":620,"navigation":621,"ogImage":618,"path":622,"robots":618,"schemaOrg":618,"seo":623,"sitemap":624,"stem":625,"__hash__":626},"articles\u002Farticles\u002F01.How-to-design-almost-any-ui-element.md","58 links on designing almost any UI element",{"type":8,"value":9,"toc":592},"minimark",[10,14,26,29,32,35,67,95,130,158,186,214,242,263,291,319,347,375,403,438,466,494,522,550,578,581,584],[11,12,6],"h1",{"id":13},"_58-links-on-designing-almost-any-ui-element",[15,16,17,18,25],"p",{},"Back in 2021, I posted a ",[19,20,24],"a",{"href":21,"rel":22},"https:\u002F\u002Fx.com\u002Fvponamariov\u002Fstatus\u002F1381584285300359169",[23],"nofollow","list of 58 links on Twitter"," — covering\nhow to design various UI elements: buttons, inputs, modals, tables, navbars, and more.",[15,27,28],{},"That tweet got more attention than I expected, so I decided to save the collection here —\nin a cleaner, more readable format.",[15,30,31],{},"It’s not a comprehensive guide — just a personal list I’ve used while working on real products.\nI’m sharing it in case it helps you too.",[15,33,34],{},"No fluff, no affiliate links — just hand-picked, solid resources that explain what works and why.",[36,37,40,45],"div",{"className":38},[39],"mb-8",[41,42,44],"h2",{"id":43},"buttons","Buttons",[15,46,47,52,55,60,62],{},[19,48,51],{"href":49,"rel":50},"https:\u002F\u002Fuxplanet.org\u002F7-basic-rules-for-button-design-63dcdf5676b4",[23],"7 Basic Rules for Button Design",[53,54],"br",{},[19,56,59],{"href":57,"rel":58},"https:\u002F\u002Fuxdesign.cc\u002Fbutton-design-user-interface-components-series-85243b6736c7",[23],"Button Design — UI component series",[53,61],{},[19,63,66],{"href":64,"rel":65},"https:\u002F\u002Fuxdesign.cc\u002Fui-cheat-sheets-buttons-7329ed9d6112",[23],"UI cheat sheet: buttons",[36,68,70,74],{"className":69},[39],[41,71,73],{"id":72},"text-fields","Text fields",[15,75,76,81,83,88,90],{},[19,77,80],{"href":78,"rel":79},"https:\u002F\u002Fuxdesign.cc\u002Fui-cheat-sheet-text-fields-2152112615f8",[23],"UI cheat sheet: text fields",[53,82],{},[19,84,87],{"href":85,"rel":86},"https:\u002F\u002Fuxdesign.cc\u002Ftext-fields-forms-design-ui-components-series-2b32b2beebd0",[23],"Text fields & Forms design — UI components series",[53,89],{},[19,91,94],{"href":92,"rel":93},"https:\u002F\u002Fuxplanet.org\u002Fthe-anatomy-of-input-field-c3ef863e01d7",[23],"The Anatomy of Input Field",[36,96,98,102],{"className":97},[39],[41,99,101],{"id":100},"checkboxes-toggles","Checkboxes & Toggles",[15,103,104,109,111,116,118,123,125],{},[19,105,108],{"href":106,"rel":107},"https:\u002F\u002Fuxplanet.org\u002Fcheckbox-vs-toggle-switch-7fc6e83f10b8",[23],"Checkbox vs Toggle Switch",[53,110],{},[19,112,115],{"href":113,"rel":114},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Ftoggle-switch-guidelines\u002F",[23],"Toggle-Switch Guidelines",[53,117],{},[19,119,122],{"href":120,"rel":121},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Ftoggle-design-patterns-examples\u002F",[23],"Toggle switch design: the full run through",[53,124],{},[19,126,129],{"href":127,"rel":128},"https:\u002F\u002Fuicookies.com\u002Fcss-checkbox\u002F",[23],"38 Checkbox Designs",[36,131,133,137],{"className":132},[39],[41,134,136],{"id":135},"radio-buttons","Radio Buttons",[15,138,139,144,146,151,153],{},[19,140,143],{"href":141,"rel":142},"https:\u002F\u002Fuxdesign.cc\u002Fselection-controls-ui-component-series-3badc0bdb546",[23],"Selection controls — UI component series",[53,145],{},[19,147,150],{"href":148,"rel":149},"https:\u002F\u002Fuxplanet.org\u002Fradio-buttons-ux-design-588e5c0a50dc",[23],"Radio Buttons UX Design",[53,152],{},[19,154,157],{"href":155,"rel":156},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fradio-button-design-examples\u002F",[23],"Radio button design: easy selection and decision-making",[36,159,161,165],{"className":160},[39],[41,162,164],{"id":163},"tables","Tables",[15,166,167,172,174,179,181],{},[19,168,171],{"href":169,"rel":170},"https:\u002F\u002Fmedium.com\u002Fnextux\u002Fdesign-better-data-tables-4ecc99d23356",[23],"Design better data tables",[53,173],{},[19,175,178],{"href":176,"rel":177},"https:\u002F\u002Fmedium.com\u002Fdesign-with-figma\u002Fthe-ultimate-guide-to-designing-data-tables-7db29713a85a",[23],"The Ultimate Guide to Designing Data Tables",[53,180],{},[19,182,185],{"href":183,"rel":184},"https:\u002F\u002Fuxdesign.cc\u002Fdata-table-for-enterprise-ux-cb48fb9fdf1e",[23],"Designing better data tables for enterprise UX",[36,187,189,193],{"className":188},[39],[41,190,192],{"id":191},"datepickers","Datepickers",[15,194,195,200,202,207,209],{},[19,196,199],{"href":197,"rel":198},"https:\u002F\u002Fuxplanet.org\u002Fhow-to-design-a-perfect-date-picker-control-7f47d1290c3a",[23],"How to Design a Perfect Date Picker Control?",[53,201],{},[19,203,206],{"href":204,"rel":205},"https:\u002F\u002Fuxplanet.org\u002Fdate-picker-design-best-practices-41bd522f10a5",[23],"Date Picker Design Best Practices",[53,208],{},[19,210,213],{"href":211,"rel":212},"https:\u002F\u002Fuxdesign.cc\u002Fdate-picker-design-5c5ef8f35286",[23],"A hunt for the perfect date picker UI",[36,215,217,221],{"className":216},[39],[41,218,220],{"id":219},"sliders","Sliders",[15,222,223,228,230,235,237],{},[19,224,227],{"href":225,"rel":226},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2017\u002F07\u002Fdesigning-perfect-slider\u002F",[23],"Designing The Perfect Slider",[53,229],{},[19,231,234],{"href":232,"rel":233},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fslider-design-web\u002F",[23],"Slider design UI patterns and examples",[53,236],{},[19,238,241],{"href":239,"rel":240},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fgui-slider-controls\u002F",[23],"Slider Design: Rules of Thumb",[36,243,245,249],{"className":244},[39],[41,246,248],{"id":247},"tabs","Tabs",[15,250,251,256,258],{},[19,252,255],{"href":253,"rel":254},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2009\u002F06\u002Fmodule-tabs-in-web-design-best-practices-and-solutions\u002F",[23],"Module Tabs in Web Design: Best Practices and Solutions",[53,257],{},[19,259,262],{"href":260,"rel":261},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Ftabs-used-right\u002F",[23],"12 Tabs Design guidelines",[36,264,266,270],{"className":265},[39],[41,267,269],{"id":268},"dropdowns","Dropdowns",[15,271,272,277,279,284,286],{},[19,273,276],{"href":274,"rel":275},"https:\u002F\u002Fuxdesign.cc\u002Fui-cheat-sheet-dropdown-field-a30025c0f432",[23],"UI cheat sheet: dropdown field",[53,278],{},[19,280,283],{"href":281,"rel":282},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fdrop-down-menus\u002F",[23],"Dropdowns: Design Guidelines",[53,285],{},[19,287,290],{"href":288,"rel":289},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fdrop-down-list-design\u002F",[23],"Drop down list design: the complete guide",[36,292,294,298],{"className":293},[39],[41,295,297],{"id":296},"pagination","Pagination",[15,299,300,305,307,312,314],{},[19,301,304],{"href":302,"rel":303},"https:\u002F\u002Fwww.uxmatters.com\u002Fmt\u002Farchives\u002F2018\u002F11\u002Fpaging-scrolling-and-infinite-scroll.php",[23],"Paging, Scrolling, and Infinite Scroll",[53,306],{},[19,308,311],{"href":309,"rel":310},"https:\u002F\u002Fuxplanet.org\u002Fux-infinite-scrolling-vs-pagination-1030d29376f1",[23],"UX: Infinite Scrolling vs. Pagination",[53,313],{},[19,315,318],{"href":316,"rel":317},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fitem-list-view-all\u002F",[23],"Users' Pagination Preferences and \"View All\"",[36,320,322,326],{"className":321},[39],[41,323,325],{"id":324},"search-inputs","Search inputs",[15,327,328,333,335,340,342],{},[19,329,332],{"href":330,"rel":331},"https:\u002F\u002Fuxdesign.cc\u002Fbest-ux-practices-for-search-inputs-c44dba565448",[23],"Best UX practices for search inputs",[53,334],{},[19,336,339],{"href":337,"rel":338},"https:\u002F\u002Fuxplanet.org\u002Fdesign-a-perfect-search-box-b6baaf9599c",[23],"Design a Perfect Search Box",[53,341],{},[19,343,346],{"href":344,"rel":345},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fsite-search-suggestions\u002F",[23],"Site Search Suggestions",[36,348,350,354],{"className":349},[39],[41,351,353],{"id":352},"breadcrumbs","Breadcrumbs",[15,355,356,361,363,368,370],{},[19,357,360],{"href":358,"rel":359},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fbreadcrumbs\u002F",[23],"Breadcrumbs: 11 Design Guidelines for Desktop and Mobile",[53,362],{},[19,364,367],{"href":365,"rel":366},"https:\u002F\u002Fmedium.com\u002Fmadison-ave-collective\u002Fare-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b",[23],"Are breadcrumbs still fresh for UX?",[53,369],{},[19,371,374],{"href":372,"rel":373},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fbreadcrumb-examples\u002F",[23],"Breadcrumb examples for inspiration",[36,376,378,382],{"className":377},[39],[41,379,381],{"id":380},"carousels","Carousels",[15,383,384,389,391,396,398],{},[19,385,388],{"href":386,"rel":387},"https:\u002F\u002Fwebflow.com\u002Fblog\u002Fcarousel-slider-design-best-practices",[23],"Carousel\u002Fslider design best practices (with examples)",[53,390],{},[19,392,395],{"href":393,"rel":394},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fdesigning-effective-carousels\u002F",[23],"Carousel Usability: Designing an Effective UI for Websites with Content Overload",[53,397],{},[19,399,402],{"href":400,"rel":401},"https:\u002F\u002Fuxplanet.org\u002Fdesigning-a-user-friendly-homepage-carousel-f664c9f2b50e",[23],"Designing a User-Friendly Homepage Carousel",[36,404,406,410],{"className":405},[39],[41,407,409],{"id":408},"modals","Modals",[15,411,412,417,419,424,426,431,433],{},[19,413,416],{"href":414,"rel":415},"https:\u002F\u002Fxd.adobe.com\u002Fideas\u002Fprocess\u002Fui-design\u002Fbest-practices-for-designing-overlays\u002F",[23],"Best Practices for Designing UI Overlays",[53,418],{},[19,420,423],{"href":421,"rel":422},"https:\u002F\u002Fwww.appcues.com\u002Fblog\u002Fmodal-dialog-windows",[23],"Big, bold UX—using modal windows for in-app user engagement",[53,425],{},[19,427,430],{"href":428,"rel":429},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmodal-nonmodal-dialog\u002F",[23],"Modal & Nonmodal Dialogs: When (& When Not) to Use Them",[53,432],{},[19,434,437],{"href":435,"rel":436},"https:\u002F\u002Fmedium.com\u002Fpulsar\u002Fmodern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92",[23],"Modal dialogs",[36,439,441,445],{"className":440},[39],[41,442,444],{"id":443},"cards","Cards",[15,446,447,452,454,459,461],{},[19,448,451],{"href":449,"rel":450},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fcards-ui-design\u002F",[23],"Card UI design: fundamentals and examples",[53,453],{},[19,455,458],{"href":456,"rel":457},"https:\u002F\u002Fuxplanet.org\u002Fsimple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e",[23],"Simple Design Tips for Crafting Better UI Cards",[53,460],{},[19,462,465],{"href":463,"rel":464},"https:\u002F\u002Fuxdesign.cc\u002Fdesigning-cards-for-beginners-9ed9454d27f6",[23],"Designing cards",[36,467,469,473],{"className":468},[39],[41,470,472],{"id":471},"tooltips","Tooltips",[15,474,475,480,482,487,489],{},[19,476,479],{"href":477,"rel":478},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Ftooltip-guidelines\u002F",[23],"Tooltip Guidelines",[53,481],{},[19,483,486],{"href":484,"rel":485},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2021\u002F02\u002Fdesigning-tooltips-mobile-user-interfaces\u002F",[23],"Designing Better Tooltips For Mobile User Interfaces",[53,488],{},[19,490,493],{"href":491,"rel":492},"https:\u002F\u002Fuxdesign.cc\u002Ftooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e",[23],"Tooltips: your secret weapon for improving feature discovery",[36,495,497,501],{"className":496},[39],[41,498,500],{"id":499},"navigation","Navigation",[15,502,503,508,510,515,517],{},[19,504,507],{"href":505,"rel":506},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fnavigation-design-almost-everything-you-need-to-know\u002F",[23],"Navigation design: Almost everything you need to know",[53,509],{},[19,511,514],{"href":512,"rel":513},"https:\u002F\u002Fblog.prototypr.io\u002Fux-design-for-navigation-menus-d9875c91a7ea",[23],"UX Design for Navigation Menu",[53,516],{},[19,518,521],{"href":519,"rel":520},"https:\u002F\u002Fuxmovement.medium.com\u002Fthe-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2",[23],"The Fastest Navigation Layout for a Three-Level Menu",[36,523,525,529],{"className":524},[39],[41,526,528],{"id":527},"loaders","Loaders",[15,530,531,536,538,543,545],{},[19,532,535],{"href":533,"rel":534},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fprogress-indicators\u002F",[23],"Progress Indicators Make a Slow System Less Insufferable",[53,537],{},[19,539,542],{"href":540,"rel":541},"https:\u002F\u002Fuxdesign.cc\u002Fstop-using-a-loading-spinner-theres-something-better-d186194f771e",[23],"Stop Using A Loading Spinner, There’s Something Better",[53,544],{},[19,546,549],{"href":547,"rel":548},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2016\u002F12\u002Fbest-practices-for-animated-progress-indicators\u002F",[23],"Best Practices For Animated Progress Indicators",[36,551,553,557],{"className":552},[39],[41,554,556],{"id":555},"forms","Forms",[15,558,559,564,566,571,573],{},[19,560,563],{"href":561,"rel":562},"https:\u002F\u002Fmedium.com\u002Fnextux\u002Fdesign-better-forms-96fadca0f49c",[23],"Design Better Forms",[53,565],{},[19,567,570],{"href":568,"rel":569},"https:\u002F\u002Fcxl.com\u002Fblog\u002Fform-design-best-practices\u002F",[23],"Form Design: 13 Empirically Backed Best Practices",[53,572],{},[19,574,577],{"href":575,"rel":576},"https:\u002F\u002Fuxdesign.cc\u002Fthe-ux-behind-designing-better-forms-d6ebe7a817d2",[23],"The UX behind designing better forms",[15,579,580],{},"That's it. Hopefully, it was useful for you. If you wish, follow me on Twitter, I post a lot about UI\u002FUX there.",[15,582,583],{},"By the way!",[15,585,586,591],{},[19,587,590],{"href":588,"rel":589},"https:\u002F\u002Fwww.svgator.com\u002F",[23],"These guys"," helped me a lot while I've been collecting these links, check them out.\nEspecially if you're interested in animations.",{"title":593,"searchDepth":594,"depth":594,"links":595},"",2,[596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614],{"id":43,"depth":594,"text":44},{"id":72,"depth":594,"text":73},{"id":100,"depth":594,"text":101},{"id":135,"depth":594,"text":136},{"id":163,"depth":594,"text":164},{"id":191,"depth":594,"text":192},{"id":219,"depth":594,"text":220},{"id":247,"depth":594,"text":248},{"id":268,"depth":594,"text":269},{"id":296,"depth":594,"text":297},{"id":324,"depth":594,"text":325},{"id":352,"depth":594,"text":353},{"id":380,"depth":594,"text":381},{"id":408,"depth":594,"text":409},{"id":443,"depth":594,"text":444},{"id":471,"depth":594,"text":472},{"id":499,"depth":594,"text":500},{"id":527,"depth":594,"text":528},{"id":555,"depth":594,"text":556},"2023-01-28T17:19:11+04:00","Recently I posted on Twitter a list of 58 links about designing different UI elements. It turned out that the tweet was very helpful. So I decided to drop the link collection here as well.  Here is the list in a readable format\n","md",null,"\u002Fimg\u002Fsocial.png",{},true,"\u002Farticles\u002Fhow-to-design-almost-any-ui-element",{"title":6,"description":616},{"loc":622},"articles\u002F01.How-to-design-almost-any-ui-element","EyYKzqe74OA50c9he72JuNu9sqQZnHxo0L0FWA95A7E",{"id":628,"title":629,"body":630,"date":615,"description":843,"extension":617,"head":618,"imageUrl":844,"meta":845,"navigation":621,"ogImage":618,"path":846,"robots":618,"schemaOrg":618,"seo":847,"sitemap":848,"stem":849,"__hash__":850},"articles\u002Farticles\u002F02.How-to-control-user-attention.md","How to grab and guide user attention in UI design",{"type":8,"value":631,"toc":832},[632,635,638,641,644,647,650,653,658,662,665,668,672,676,679,682,686,690,693,696,700,704,707,710,714,718,721,724,728,732,735,740,744,748,752,756,759,763,766,769,772,787,790,793,807,810,813,817,829],[11,633,629],{"id":634},"how-to-grab-and-guide-user-attention-in-ui-design",[15,636,637],{},"Customer attention is something that every business wants to get.",[15,639,640],{},"Many tricks are used in UI design to do this. Some examples are CTA buttons, accent colors, animations and so on.",[15,642,643],{},"There is an endless list of possibilities on how to use your attention, and the list is constantly growing: marketers\nconsistently look for new gimmicks.",[15,645,646],{},"In UI\u002FUX design, there are some basic concepts that you should know.",[15,648,649],{},"Let's say we have 12 squares. They are completely identical. How can we shift your focus to a specific square?",[651,652],"user-attention-squares",{},[36,654,657],{"className":655},[656],"sr-only","\n  A 4x3 grid of identical dark squares used as a baseline for all attention experiments.\n",[41,659,661],{"id":660},"distance","Distance",[15,663,664],{},"If we move any of these squares somewhere far from others, it'll immediately catch our attention.",[666,667],"user-attention-squares-distance",{},[36,669,671],{"className":670},[656],"\n  One square is moved far away from the group to demonstrate how distance grabs attention.\n",[41,673,675],{"id":674},"size","Size",[15,677,678],{},"If every square has the same size, they are all equal. As soon as you change the size of any of them, you'll grab users'\nattention immediately.",[680,681],"user-attention-squares-size",{},[36,683,685],{"className":684},[656],"\n  One square is smaller than the others, illustrating how size affects visual prominence.\n",[41,687,689],{"id":688},"color","Color",[15,691,692],{},"The same applies to colors. As soon as we change the color of any of the squares, our focus will shift to that square.",[694,695],"user-attention-squares-color",{},[36,697,699],{"className":698},[656],"\n  One square is pink, while the rest are dark blue, showing how color contrast attracts attention.\n",[41,701,703],{"id":702},"shape","Shape",[15,705,706],{},"An item will certainly stand out if it has a different shape.",[708,709],"user-attention-squares-shape",{},[36,711,713],{"className":712},[656],"\n  One square is replaced with a star shape, demonstrating how shape variation draws the eye.\n",[41,715,717],{"id":716},"motion","Motion",[15,719,720],{},"Another trick would be to animate an element. This is a widely used pattern; I'm sure you saw CTA buttons with some\nanimations, like shaking or jumping or whatever.",[722,723],"user-attention-squares-motion",{},[36,725,727],{"className":726},[656],"\n  One square is animated with a pulsing effect to show how motion can be used to grab focus.\n",[41,729,731],{"id":730},"people","People",[15,733,734],{},"A very subtle trick is to place a person looking at or pointing at something. Look at these examples.",[736,737],"v-image",{"alt":738,"src":739},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The first example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-1.jpeg",[736,741],{"alt":742,"src":743},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The second example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-2.jpeg",[736,745],{"alt":746,"src":747},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The third example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-3.jpeg",[736,749],{"alt":750,"src":751},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The fourth example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-4.jpeg",[41,753,755],{"id":754},"sound","Sound",[15,757,758],{},"While it's not very common and usually considered a bad practice, the sound definitely attracts our attention.",[41,760,762],{"id":761},"now-what","Now what?",[15,764,765],{},"How to apply this in user interfaces? Well, there are plenty of ways.",[15,767,768],{},"Say you have several links. If you want to move user focus to a specific link, you can change its color, size, or even\nanimate it.",[15,770,771],{},"One of my favorite examples is a trick used by Josh Cameau at his blog. By having this fellow, he got a huge number of\nsubscribers.",[736,773,777],{"alt":774,"src":775,":fullWidth":776},"An example of grabbing users attention in a unique way","\u002Fimg\u002Fhow-to-control-user-attention\u002Fjosh.gif","true",[778,779,780],"template",{"v-slot:description":593},[15,781,782],{},[19,783,786],{"href":784,"rel":785},"https:\u002F\u002Fwww.joshwcomeau.com\u002F",[23],"Josh's Cameau blog",[15,788,789],{},"Another common trick is to reduce the number of options. There is Hick's law: The time it takes to make a decision\nincreases with the number and complexity of choices.",[15,791,792],{},"Look at this chart that perfectly illustrates the idea.",[736,794,797],{"alt":795,"src":796},"Number of options chart","\u002Fimg\u002Fhow-to-control-user-attention\u002Fnumber-of-options.png",[778,798,799],{"v-slot:description":593},[15,800,801,802],{},"Image from ",[19,803,806],{"href":804,"rel":805},"https:\u002F\u002Fwww.codecademy.com\u002Fresources\u002Fdocs\u002Fuiux\u002Fux-psychology\u002Fhicks-law",[23],"codecademy",[15,808,809],{},"The more choice you give users, the harder it becomes to choose anything. By reducing the number of items, you can make\nit easier for users to decide by reducing the distraction of having many possibilities.",[15,811,812],{},"By combining describing techniques you can lead users to somewhere you need.",[41,814,816],{"id":815},"further-reading","Further reading",[15,818,819,820,825,826,828],{},"If you enjoyed this post, you might also like ",[19,821,824],{"href":822,"rel":823},"https:\u002F\u002Ficons8.com\u002Fblog\u002Farticles\u002Fwhy-great-designers-break-alignment-rules\u002F",[23],"this article I wrote for Icons8",",",[53,827],{},"\nwhere I explore how visual weight, alignment, shape, color, and even physics influence what users notice first — and why\nperfect alignment in Figma often still feels “off”.",[15,830,831],{},"It’s a deeper dive into how our perception works — packed with real examples, UI breakdowns, and practical takeaways.",{"title":593,"searchDepth":594,"depth":594,"links":833},[834,835,836,837,838,839,840,841,842],{"id":660,"depth":594,"text":661},{"id":674,"depth":594,"text":675},{"id":688,"depth":594,"text":689},{"id":702,"depth":594,"text":703},{"id":716,"depth":594,"text":717},{"id":730,"depth":594,"text":731},{"id":754,"depth":594,"text":755},{"id":761,"depth":594,"text":762},{"id":815,"depth":594,"text":816},"User attention is what everyone tries to get. There are some very general rules that  can be applied almost in every application.\n","\u002Fimg\u002Fhow-to-control-user-attention\u002Fsquares.png",{},"\u002Farticles\u002Fhow-to-control-user-attention",{"title":629,"description":843},{"loc":846},"articles\u002F02.How-to-control-user-attention","f0VdIxYM6qzFUq-sTft_BkWTamJZ9lnW-FKSaatqeMI",{"id":852,"title":853,"body":854,"date":615,"description":1010,"extension":617,"head":618,"imageUrl":619,"meta":1011,"navigation":621,"ogImage":618,"path":1012,"robots":618,"schemaOrg":618,"seo":1013,"sitemap":1014,"stem":1015,"__hash__":1016},"articles\u002Farticles\u002F03.What-is-optimistic-ui.md","What is Optimistic UI?",{"type":8,"value":855,"toc":1003},[856,859,862,866,869,872,875,879,882,889,892,895,899,902,909,912,915,918,921,924,927,938,941,944,948,951,954,957,960,965,969,971,980,983],[11,857,853],{"id":858},"what-is-optimistic-ui",[15,860,861],{},"In this article I want to share with you an interesting approach of building user interfaces. But before we start, we\nneed to dive into history and how UI worked many years ago.",[41,863,865],{"id":864},"the-first-approach","The first approach",[15,867,868],{},"In good old days we had the following scheme.",[15,870,871],{},"A user clicks on a submit button, the browser sends a request (usually post) to the server, server does some\ncalculations and then returns a new HTML page as a response.",[15,873,874],{},"The only indicator that something is going on is the loader next to the address bar in the browser.",[41,876,878],{"id":877},"the-second-approach","The second approach",[15,880,881],{},"Then some awesome folks invented AJAX that allowed us to update only part of the interface. Which drastically improved\nuser experience. You can now show the loaders, update part of lists, tables, and all that stuff.",[15,883,884,885],{},"Which is great. But there is a thing that still is a problem. Maybe not a big one, but still: ",[886,887,888],"strong",{},"users don't like to\nwait.",[15,890,891],{},"I'll tell you honestly that I don't have any statistics but I talked to a few guys who worked in big companies, and they\nsaid that a delay of some fractions of a second might significantly decrease the number of sales.",[15,893,894],{},"Because users simply don't like to wait.",[41,896,898],{"id":897},"giving-feedback-before-the-server-responds","Giving feedback before the server responds",[15,900,901],{},"Imagine you order a pizza and chose cash as a payment method. The pizzeria instantly approves your order and starts\ncooking. And you trust the pizzeria that it will deliver your order on time. They don't even call you to approve your\norder.",[15,903,904,905,908],{},"But can they ",[886,906,907],{},"not"," deliver your order? Technically yes. Bad things happen.",[15,910,911],{},"Now, back to the UI\u002FUX area.",[15,913,914],{},"First, let's roughly consider that any action that you make can be crucial or non-crucial.",[15,916,917],{},"If you take a loan and press the submit button, it's quite crucial that you know what the result is: whether you got the\nloan or not.",[15,919,920],{},"If you mark a to-do item done, it's not that crucial.",[15,922,923],{},"On the other hand, some of the operations are frequent (marking to-do items as done, hopefully), other operations are\nless frequent (taking the loan).",[15,925,926],{},"So the optimistic approach says that you can instantly tell users that their action has been successfully done even\nthough you don't know yet the actual result.",[15,928,929,930,933,934,937],{},"For example, when a user clicks on the checkbox that marks a task as done, you can ",[886,931,932],{},"skip"," waiting till the request\nto the server is completed and ",[886,935,936],{},"instantly"," show the user that the task was marked as completed.",[15,939,940],{},"Even though it might not be true, and it's a lie, if in 99.99% of cases such requests are completed successfully, you\nmight consider applying such approach.",[15,942,943],{},"In this case it looks like your app works instantly, which is good for user experience. What's not good is that it might\nbe a false impression.",[41,945,947],{"id":946},"what-if-the-request-fails","What if the request fails?",[15,949,950],{},"That's a good question. In this case you should envisage that case and somehow react. The most obvious and simple way is\nto show some kind of a notification with an error message or something like that.",[15,952,953],{},"And then return to the previous state of the app (e.g. returning the task back to \"not done\" state).",[15,955,956],{},"Even though it might seem really ugly, the idea is that it should happen very rarely and it should be kind of an\nexception.",[15,958,959],{},"But the thing is: you still need to handle the case even if you don't apply the optimistic approach and wait for the\nresponse, right?",[15,961,962],{},[886,963,964],{},"P.S. I have a short video on this topic — a quick overview with a real-world example. Might be useful.",[966,967],"youtube",{"src":968},"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FkHJRyOwfe0I?si=KaKqUBs5O0WQo9to",[41,970,816],{"id":815},[15,972,973,974,976,977,979],{},"If you're interested in how users perceive interfaces and what grabs their attention,",[53,975],{},"\ncheck out my other article: ",[19,978,629],{"href":846},".\nIt’s a practical deep dive into contrast, motion, shapes, and other subtle UI patterns.",[15,981,982],{},"For more on optimistic UI specifically, here are a couple of useful resources from other authors:",[984,985,986,995],"ul",{},[987,988,989,994],"li",{},[19,990,993],{"href":991,"rel":992},"https:\u002F\u002Fplainenglish.io\u002Fblog\u002Fwhat-is-optimistic-ui",[23],"What is optimistic UI"," from PlainEnglish.io",[987,996,997,1002],{},[19,998,1001],{"href":999,"rel":1000},"https:\u002F\u002Fwww.apollographql.com\u002Fdocs\u002Freact\u002Fv2\u002Fperformance\u002Foptimistic-ui",[23],"Optimistic UI in GraphQL"," from Apollo",{"title":593,"searchDepth":594,"depth":594,"links":1004},[1005,1006,1007,1008,1009],{"id":864,"depth":594,"text":865},{"id":877,"depth":594,"text":878},{"id":897,"depth":594,"text":898},{"id":946,"depth":594,"text":947},{"id":815,"depth":594,"text":816},"Optimistic UI is a technique that makes your app feel instant by showing success before confirmation.  It's not for every case, but when used right, it creates smooth and fast UX.\n",{},"\u002Farticles\u002Fwhat-is-optimistic-ui",{"title":853,"description":1010},{"loc":1012},"articles\u002F03.What-is-optimistic-ui","Q7zZGNsA4HZZoZLe5KbCeszvippuPvSphGNSWl9JSds",{"id":1018,"title":1019,"body":1020,"date":615,"description":1154,"extension":617,"head":618,"imageUrl":1037,"meta":1155,"navigation":621,"ogImage":618,"path":1156,"robots":618,"schemaOrg":618,"seo":1157,"sitemap":1158,"stem":1159,"__hash__":1160},"articles\u002Farticles\u002F04.Vertical-vs-horizontal-navigation.md","Vertical vs horizontal navigation: which one is better for your app?",{"type":8,"value":1021,"toc":1141},[1022,1025,1031,1034,1038,1041,1044,1048,1053,1064,1068,1079,1083,1086,1097,1100,1111,1115,1118,1121,1124,1127,1129],[11,1023,1019],{"id":1024},"vertical-vs-horizontal-navigation-which-one-is-better-for-your-app",[15,1026,1027,1030],{},[886,1028,1029],{},"TL;DR:"," In most cases horizontal navigation is preferable, but if you have a large number of categories (links) that\nmust be displayed right away, you might want to use vertical navigation.",[15,1032,1033],{},"Let's begin with a simple illustration of what I'm talking about. By vertical navigation I mean the one that is\ntypically found on the left side and is called \"Sidebar\". As for horizontal it's the one that is usually placed at the\ntop.",[736,1035],{"alt":1036,"src":1037},"Navigation types","\u002Fimg\u002Fvertical-vs-horizontal-navigation\u002Fnavigation-types.png",[15,1039,1040],{},"Each has its own pros and cons, and there is no simple answer about which one to choose. Each case is unique, and you\nshould carefully think about which one to choose. After all, navigation is an essential component of any application.",[15,1042,1043],{},"Below I've compiled pros and cons of each type of navigation that I found and given some thought to each point.",[41,1045,1047],{"id":1046},"horizontal-navigation","Horizontal Navigation",[1049,1050,1052],"h3",{"id":1051},"pros","Pros",[984,1054,1055,1058,1061],{},[987,1056,1057],{},"The first and most obvious benefit is that it frees up some space beneath for your content. It could be critical if\nyou have a lot of large images or large data tables on your site. In my experience, having horizontal navigation is\nreally better when you have large tables (e.g. you design an accounting application)",[987,1059,1060],{},"It is said that most websites use horizontal navigation and thus most people are familiar with it (again, it \"feels\nmore natural\"). Most websites indeed do use horizontal navigation, and it may be a more familiar pattern for most\nusers. See Jakob's law and Consistency and standards heuristic for the reference.",[987,1062,1063],{},"People claim that horizontal navigation is more natural because some people read from left to right. I don't think\nit's important enough to be concerned about. At least, for applications frequently used by the same users. Because\nusers become accustomed to it, and it should not be a problem in my opinion.",[1049,1065,1067],{"id":1066},"cons","Cons",[984,1069,1070,1073,1076],{},[987,1071,1072],{},"Limited space. This is the most serious issue. You cannot place many links at once in the horizontal navigation. You\ncan, of course, add sub-menus, dropdowns and so on, but the horizontal navigation will only show the first level of\ninformation architecture (the first level of the sitemap tree). That means you should carefully consider the number of\nlinks and their names.",[987,1074,1075],{},"Changing the menu may be difficult due to the reasons stated above. Each time you want to add or remove a link you\nshould think about if it fits the menu.",[987,1077,1078],{},"Large dropdown submenus cover a part of the main content area.",[41,1080,1082],{"id":1081},"vertical-navigation","Vertical Navigation",[1049,1084,1052],{"id":1085},"pros-1",[984,1087,1088,1091,1094],{},[987,1089,1090],{},"More space available for top level links. That's the biggest advantage of vertical navigation. Vertical navigation is\na good choice if you have a lot of links at the top level of your information architecture.",[987,1092,1093],{},"Unlike horizontal navigation, a vertical one can contain links with long names. They can even be multiline.",[987,1095,1096],{},"It is easier to add new links (because you often have some space available)",[1049,1098,1067],{"id":1099},"cons-1",[984,1101,1102,1105,1108],{},[987,1103,1104],{},"Vertical navigation takes up some space and may not be appropriate for applications that display a lot of data in the\nmain content area.",[987,1106,1107],{},"A lot of space is simply wasted if you only have a few links.",[987,1109,1110],{},"According to several sources, vertical navigation is less common, which may be confusing for users. I don't think it's\na big deal, especially if you have an app that is constantly used by the same people (e.g. SaaS or similar). In this\ncase, users will get used to it.",[41,1112,1114],{"id":1113},"which-should-you-pick","Which should you pick?",[15,1116,1117],{},"There is no simple answer. Each case is unique.",[15,1119,1120],{},"However, in most cases, horizontal navigation is preferable because it covers more cases than vertical navigation.",[15,1122,1123],{},"There are some special cases that may require deviation from common rules. For example, imagine you make a site focused\non visual aesthetics, that should stand out and even broke some usability principles on purpose?",[15,1125,1126],{},"Or you have a very large e-commerce shop, you might even have multiple navigations combined together in some way, as\nwell as breadcrumbs and something else.",[41,1128,816],{"id":815},[984,1130,1131,1136],{},[987,1132,1133,1135],{},[19,1134,629],{"href":846}," - A visual guide to\ndesign techniques that help direct user focus — from contrast and color to motion and layout.",[987,1137,1138,1140],{},[19,1139,853],{"href":1012}," - A quick look at how to make your interface feel instant by\nshowing results before the server responds.",{"title":593,"searchDepth":594,"depth":594,"links":1142},[1143,1148,1152,1153],{"id":1046,"depth":594,"text":1047,"children":1144},[1145,1147],{"id":1051,"depth":1146,"text":1052},3,{"id":1066,"depth":1146,"text":1067},{"id":1081,"depth":594,"text":1082,"children":1149},[1150,1151],{"id":1085,"depth":1146,"text":1052},{"id":1099,"depth":1146,"text":1067},{"id":1113,"depth":594,"text":1114},{"id":815,"depth":594,"text":816},"Should your app use horizontal or vertical navigation? Here's a quick breakdown of pros and cons  to help you decide — including usability, flexibility, and layout trade-offs.\n",{},"\u002Farticles\u002Fvertical-vs-horizontal-navigation",{"title":1019,"description":1154},{"loc":1156},"articles\u002F04.Vertical-vs-horizontal-navigation","qE7v5Xc3vl6kfwd2f-66ez0j9AJVdjBsPG9sAI-pQ1k",{"id":1162,"title":1163,"body":1164,"date":615,"description":1324,"extension":617,"head":618,"imageUrl":1257,"meta":1325,"navigation":621,"ogImage":618,"path":1326,"robots":618,"schemaOrg":618,"seo":1327,"sitemap":1328,"stem":1329,"__hash__":1330},"articles\u002Farticles\u002F05.Should-required-fields-be-marked.md","Should required fields be marked?",{"type":8,"value":1165,"toc":1318},[1166,1169,1172,1175,1178,1181,1184,1188,1191,1197,1200,1203,1208,1211,1214,1217,1222,1225,1230,1233,1237,1240,1243,1246,1251,1254,1258,1262,1265,1268,1272,1275,1278,1281,1284,1287,1305,1307],[11,1167,1163],{"id":1168},"should-required-fields-be-marked",[15,1170,1171],{},"It might seem like not a big issue, but in the UX world we try to make users life as easy as possible, so even such\nsmall detail as marking a field required matters.",[15,1173,1174],{},"I've researched a lot of materials about should we do this or not. The conclusion is...there is no unanimous opinion.",[15,1176,1177],{},"A very popular resource, NNGroup, states: \"Using an asterisk to mark required fields is an easy way to improve the\nusability of your forms. Only marking optional fields makes it difficult for people to fill out the form.\"",[15,1179,1180],{},"They provide many reasons why we should mark required fields and how to do this. I'm not going to copy the whole article\nhere, you can read it by yourself.",[15,1182,1183],{},"However, there is another famous UI book written in Russian. The author of this book is against marking fields as\nrequired due to the following reasons.",[41,1185,1187],{"id":1186},"why-we-shouldnt-use-asterisks-an-opinion","Why we shouldn't use asterisks (an opinion)",[15,1189,1190],{},"Let's go over these reasons.",[1192,1193,1194],"blockquote",{},[15,1195,1196],{},"It looks technical, not human. We design for humans, not for machines. Asterisks are \"techno-dependent\" symbols",[15,1198,1199],{},"In terms of humanity, an asterisk might indeed look technical, a little bit cryptic. But the thing is that people are\ngetting used to the symbol so much that I don't think it's a big issue.",[15,1201,1202],{},"From a philosophical point of view, it might make sense, but in practice, it doesn't have any sense.",[1192,1204,1205],{},[15,1206,1207],{},"Asterisks are an invention of WEB. Operating systems usually don't use them at all.",[15,1209,1210],{},"That's an interesting observation.",[15,1212,1213],{},"But what I realized is that in operating systems most of the forms are related to settings, where you choose options,\nnot sending data to servers.",[15,1215,1216],{},"In most cases, these forms consist of dropdowns, toggles, and checkboxes and have a predefined number of options. So\nthey are all required by default.",[1192,1218,1219],{},[15,1220,1221],{},"In most forms all the fields should be required. If the field is not required, don't ask it.",[15,1223,1224],{},"This one is very true. If it's possible not to ask users something, it's better not to ask. So ideally all the fields\nare always required. In such a case, it might be obvious that we ask to fill in all of the fields. But that's an ideal\nworld, in reality, things can be more complicated.",[1192,1226,1227],{},[15,1228,1229],{},"If the field is not required, but we still want people to fill it, it's possible to state the requirement inside the\nfield label.",[15,1231,1232],{},"Another interesting approach. The author shows an example where you have a site URL input and the label says \"Your site,\nif you have one\". Or, the label is \"Site\" and there is a hint below it: \"if you have one\".",[736,1234],{"alt":1235,"src":1236},"Providing hint below the input","\u002Fimg\u002Fshould-required-fields-be-marked\u002Fhint.png",[15,1238,1239],{},"On the one hand, it feels more natural to me. It's like asking people in real life \"Hey, may I have caramel syrup if you\nhave one?\".",[15,1241,1242],{},"On the other hand, due to our habits, we'll probably more quickly understand if the field is required or not by looking\nat the asterisk or \"optional\" label.",[15,1244,1245],{},"That's all related to Jakob's law: \"users prefer your site to work the same way as all the other sites they already\nknow\".",[1192,1247,1248],{},[15,1249,1250],{},"You can separate required and non required fields",[15,1252,1253],{},"This is a nice trick in my opinion. At first ask for required fields, and non-required fields can go later. By using\nvisual separation, the sense of the fields (they should feel optional), appropriate labels and fields, it might be a\nsolution to remove asterisks that clutter other labels.",[736,1255],{"alt":1256,"src":1257},"Separating required and non required fields","\u002Fimg\u002Fshould-required-fields-be-marked\u002Fseparating.png",[41,1259,1261],{"id":1260},"disabling-the-submit-button","Disabling the submit button",[15,1263,1264],{},"Another option is to disable submit button before the form is filled.",[15,1266,1267],{},"However, this is quite a dangerous step. There are some situations where it works (such as phone verification form or\naccepting terms and conditions), but in general it's considered as anti-pattern.",[41,1269,1271],{"id":1270},"final-thoughts","Final thoughts",[15,1273,1274],{},"Don't forget that some of the forms don't need asterisks at all.",[15,1276,1277],{},"Such forms as login, credit cards and probably some other common forms that are already become very common don't need\nthis over-explanation.",[15,1279,1280],{},"The same applied to a form that has one field and it's explicit that you're asking for this form. For example, a phone\nverification form assumes that you have to fill your verification code and that's it.",[15,1282,1283],{},"Such forms are usually surrounded by appropriate context, such as a title and hints.",[15,1285,1286],{},"Overall, I think it highly depends on the form and each case is unique. I'm still not a fan of marking every field as\nrequired if you have dozens of fields.",[15,1288,1289,1290,1295,1296,1298,1299,1304],{},"Remember, apart from ",[19,1291,1294],{"href":1292,"rel":1293},"https:\u002F\u002Flawsofux.com\u002Fjakobs-law\u002F",[23],"Jakob’s Law"," — which says users prefer familiar patterns —",[53,1297],{},"\nthere’s also the ",[19,1300,1303],{"href":1301,"rel":1302},"https:\u002F\u002Flawsofux.com\u002Faesthetic-usability-effect\u002F",[23],"Aesthetic-Usability Effect",",\nwhere cleaner designs are perceived as easier to use.",[41,1306,816],{"id":815},[984,1308,1309,1314],{},[987,1310,1311,1313],{},[19,1312,1019],{"href":1156}," -\nA practical comparison of two common navigation layouts — with pros, cons, and real-life examples.",[987,1315,1316,1140],{},[19,1317,853],{"href":1012},{"title":593,"searchDepth":594,"depth":594,"links":1319},[1320,1321,1322,1323],{"id":1186,"depth":594,"text":1187},{"id":1260,"depth":594,"text":1261},{"id":1270,"depth":594,"text":1271},{"id":815,"depth":594,"text":816},"Should required fields be marked with an asterisk? While it may seem like a small thing, it can have a big impact on usability — and UX experts still disagree on the best approach.\n",{},"\u002Farticles\u002Fshould-required-fields-be-marked",{"title":1163,"description":1324},{"loc":1326},"articles\u002F05.Should-required-fields-be-marked","_uuzGwytQ1-qFF4GputZRxVUAffCwdPvdp6_289c-uQ",{"id":1332,"title":1333,"body":1334,"date":615,"description":1338,"extension":617,"head":618,"imageUrl":619,"meta":1339,"navigation":621,"ogImage":618,"path":1342,"robots":618,"schemaOrg":618,"seo":1343,"sitemap":618,"stem":1344,"__hash__":1345},"articles\u002Farticles\u002F06.Validate-it-the-right-way.md","Validate it. The right way.",{"type":8,"value":1335,"toc":1336},[],{"title":593,"searchDepth":594,"depth":594,"links":1337},[],"Forms are essential parts of any user interface. They differ from a single input and a button, ending with  huge complex forms containing multiple sections. The validation process often accompanies forms.  For developers, it might be clear how the form should be filled. But remember that there are so\n",{"external":621,"readMore":1340,"link":1341},"Read on dev.to","https:\u002F\u002Fdev.to\u002Fvponamariov\u002Fvalidate-it-ultimate-guide-41d1","\u002Farticles\u002Fvalidate-it-the-right-way",{"title":1333,"description":1338},"articles\u002F06.Validate-it-the-right-way","-T07An_w2uiVxvqVdzVu0kg9jYRalak3sFJMp4J9NOY",{"id":1347,"title":1348,"body":1349,"date":615,"description":1880,"extension":617,"head":618,"imageUrl":1881,"meta":1882,"navigation":621,"ogImage":618,"path":1884,"robots":618,"schemaOrg":618,"seo":1885,"sitemap":1886,"stem":1887,"__hash__":1888},"articles\u002Farticles\u002F07.Modals-and-user-experience.md","Modals and user experience",{"type":8,"value":1350,"toc":1855},[1351,1354,1369,1374,1381,1384,1387,1391,1394,1397,1400,1408,1413,1416,1421,1425,1433,1438,1441,1444,1447,1450,1453,1457,1460,1480,1488,1491,1495,1498,1502,1505,1508,1511,1519,1527,1530,1533,1538,1541,1544,1548,1551,1554,1557,1568,1571,1575,1578,1581,1584,1591,1595,1598,1601,1605,1613,1616,1619,1623,1634,1637,1640,1643,1647,1661,1665,1668,1672,1675,1678,1681,1689,1692,1695,1698,1701,1706,1711,1715,1719,1726,1729,1732,1735,1753,1757,1776,1780,1788,1800,1804,1807,1811,1814,1828,1832,1835,1837],[11,1352,1348],{"id":1353},"modals-and-user-experience",[1355,1356,1357,1360],"text-lead",{},[15,1358,1359],{},"Modals are widely used in user interfaces. Yet, there is a lot of criticism about using them.",[15,1361,1362,1363,1368],{},"The thing is that it's quite easy to solve some design issues by using modals. At the same time you might introduce many\nproblems in UX as well as in ",[1364,1365,1367],"v-text-tippy",{"hint":1366},"Developer experience","DX",".",[15,1370,1371],{},[886,1372,1373],{},"Disclaimer.",[15,1375,1376,1377,1380],{},"This is an ",[886,1378,1379],{},"opinionated"," article. Which means that I'm only sharing my experience as a developer and partly UI\ndesigner.",[15,1382,1383],{},"I have been developing interfaces for around 10 years. Mostly for small companies and startups.",[15,1385,1386],{},"At first, I used them everywhere. Now I realize that there are many pitfalls that you should be aware of.",[41,1388,1390],{"id":1389},"intro","Intro",[15,1392,1393],{},"Small companies often neglect to have a designer. They try to solve most design challenges by using some kind of\nstandard approach.",[15,1395,1396],{},"The decision of using modals usually comes from either developers or CEOs. Because it looks like a simple and quick\nsolution. But there is a trap.",[15,1398,1399],{},"As with any UI control, modals might be suitable or not in each particular case. The problem is that they are often\noverused.",[15,1401,1402,1403],{},"What's sad is that it's hard to convince and prove that they might be harmful. I like the quote\nfrom ",[19,1404,1407],{"href":1405,"rel":1406},"https:\u002F\u002Fuxdesign.cc\u002Fshhh-dont-tell-the-new-designers-590b4f891a95",[23],"Michael McWatters",[1192,1409,1410],{},[15,1411,1412],{},"All the research in the world is no match for your CEO’s opinion.",[15,1414,1415],{},"One argument that I hear quite a lot is",[1192,1417,1418],{},[15,1419,1420],{},"Hey, many big companies use them. It'd be silly to think that they don't have a design team that hasn't thought\nabout the pros and cons of this decision. Take a look at X!",[41,1422,1424],{"id":1423},"what-exactly-is-a-modal","What exactly is a modal?",[15,1426,1427,1428,1432],{},"The definition ",[19,1429,1431],{"href":428,"rel":1430},[23],"provided by NNGroup",":",[1192,1434,1435],{},[15,1436,1437],{},"A modal dialog is a dialog that appears on top of the main content and moves the system into a special mode\nrequiring user interaction. This dialog disables the main content until the user explicitly interacts with the modal\ndialog.",[15,1439,1440],{},"In contrast, non-modal dialogs and windows do not disable the main content. Showing the dialog box does not change\nthe functionality of the user interface.",[15,1442,1443],{},"To see the difference try to click these two buttons.",[15,1445,1446],{},"In the first case, you won't be able to continue reading this\nblog.",[15,1448,1449],{},"In the second case, you'll see a small notification in the corner that does not prevent you from reading.",[1451,1452],"a1-modal-and-non-modal-dialogs",{},[41,1454,1456],{"id":1455},"why-its-tempting-to-use-modals","Why it's tempting to use modals",[15,1458,1459],{},"There are a few reasons.",[1461,1462,1463,1466,1469,1477],"ol",{},[987,1464,1465],{},"You can display them anytime and anywhere in your app.",[987,1467,1468],{},"Since they are centered you don't need to think about how to center the content itself. Imagine a typical layout,\nwhere you have a sidebar and some content (e.g. a form with a user profile). How to fill the available space on\nthe screen?",[987,1470,1471,1472],{},"It is easier to use a one-column layout if you need to use\nforms. ",[19,1473,1476],{"href":1474,"rel":1475},"https:\u002F\u002Fbaymard.com\u002Fblog\u002Favoid-multi-column-forms",[23],"which is a recommended approach",[987,1478,1479],{},"You can easily return to the content behind the modal by closing it.",[15,1481,1482,1483,1487],{},"In my experience, they are overused a lot because it's super easy to ",[1484,1485,1486],"highlight",{},"center content"," by using them.",[15,1489,1490],{},"Yet, sooner or later you may encounter a lot of problems. Chances are, it'd be better to use a dedicated page,\ninstead of a modal. Let's see what problems we have.",[41,1492,1494],{"id":1493},"modal-state","Modal state",[15,1496,1497],{},"Quite often a modal contains a form. In this case, the modal should have some state. And we have to deal with it.",[1049,1499,1501],{"id":1500},"reset-state","Reset state",[15,1503,1504],{},"The question that I often come up with is: should we reset the state when users close the modal?",[15,1506,1507],{},"For example, imagine there is a form for adding a new customer. The form can have a dozen inputs. Now, when you filled\nmost of them but then accidentally close the modal, would you lose your data?",[15,1509,1510],{},"That's obviously not a good experience.",[15,1512,1513,1514,1518],{},"On the other hand, what if you want to add a new client ",[1515,1516,1517],"em",{},"without"," saving the previous one? So we need to meet both\ncases.",[1461,1520,1521,1524],{},[987,1522,1523],{},"Be sure that users don't lose their data, especially if the form is large",[987,1525,1526],{},"Be sure that users can clear the form easily.",[15,1528,1529],{},"Now, what if the form was on a separate page, instead of a modal? Users can refresh the page and that's it. It's harder\nto accidentally refresh the page, then close the modal.",[15,1531,1532],{},"So, the question I always asked myself:",[1192,1534,1535],{},[15,1536,1537],{},"When \"openModal\" event fires, what should I do with the modal state?",[15,1539,1540],{},"The answer highly depends on the purpose of the form. But usually, managers who I worked with asked me to put an\nalert if\na user tried to close the modal in the \"dirty\" state.",[15,1542,1543],{},"In any case - most of the solutions were not ideal.",[1049,1545,1547],{"id":1546},"set-state","Set state",[15,1549,1550],{},"Another question is setting the state. Imagine you have a list of users and the edit button next to each user.",[15,1552,1553],{},"When you click the button a modal opens with a form that should be pre-filled with the user data. What can go wrong?",[15,1555,1556],{},"Well, in this case you often need to load data from the backend. And it might take some time. So you should display some\nkind of loader. Here you have many choices:",[1461,1558,1559,1562,1565],{},[987,1560,1561],{},"Load data before the modal opens. If the API you use is fast enough, while the modal appears (I assume you have some\nanimation) you can load the data.",[987,1563,1564],{},"You can even try to load the data before starting the transition. But that's never worked fine - the small delay is\ntangible, so it's definitely not the best choice",[987,1566,1567],{},"You can show a spinner or a skeleton inside the modal. Make sure that the height of the modal doesn't change.\nBecause it causes a layout shift which makes the impression that your UI is jumping around.",[15,1569,1570],{},"Plus, make sure that you don't show the data that has been loaded from the previous modal.",[41,1572,1574],{"id":1573},"content-overflow","Content overflow",[15,1576,1577],{},"Another typical usability issue happens when modal content doesn't fit its container. It results in it having a scroll.",[15,1579,1580],{},"One of the worst things that can happen is when users cannot see the scroll because their browser hides it until\nthey hover over the content area.",[15,1582,1583],{},"In some cases, it might seem like the modal misses something but users might not understand that there is something\nbelow the container.",[15,1585,1586,1587,1590],{},"Another thing to keep in mind: ",[1515,1588,1589],{},"the primary button should be always visible",". This means that it should be placed in\nthe footer, while the body will have overflowing content.",[1049,1592,1594],{"id":1593},"validation","Validation",[15,1596,1597],{},"A very nasty problem happens when you have a long form that doesn't fit the modal, and it has validation. So users\nfill out the form, scroll down, then click submit, and nothing happens. Because there is an error that they cannot\nsee - it's above.",[15,1599,1600],{},"This case should be taken into account as well. You have many solutions here. Starting from showing a label next to\nthe submit button saying that something was filled incorrectly. And ending with automatically scrolling inside the\nmodal body to the first error.",[41,1602,1604],{"id":1603},"page-refreshing-and-url","Page refreshing and URL",[15,1606,1607,1608,1612],{},"A page always has a URL, while opening a modal by default doesn't mean that the URL will be changed. Modal is a\ncentered ",[1609,1610,1611],"code",{},"\u003Cdiv>"," with some styling after all.",[15,1614,1615],{},"Yet, sometimes you might need to share a link to the modal. Or you accidentally refreshed the page. So you should\nthink about if it's reasonable to manage modal appearance via URL. Which is usually done by using #hash.",[15,1617,1618],{},"For some modals it might be okay not to care about it. But what if it is a shareable public user profile for example?",[41,1620,1622],{"id":1621},"when-you-shouldnt-use-them","When you shouldn't use them",[15,1624,1625,1626,1629,1630,1633],{},"I'm not stating that you should never use them. After all, they are used ",[1515,1627,1628],{},"a lot",". What I want to say\nis ",[1484,1631,1632],{},"if you are making an MVP and you feel like it can bring more problems than profit",", then you can\nconsider using a separate page.",[15,1635,1636],{},"In 99% of cases, people use them to center the content. But then, when the app grows, you get more and more\nproblems.",[15,1638,1639],{},"You can solve them, but also you should consider if it'd be better to use a page instead of a modal.\nPlus, it highly depends on the purpose of the app, since sometimes it's totally okay to use modals from the beginning.",[15,1641,1642],{},"Let's see what are possible red flags.",[1049,1644,1646],{"id":1645},"red-flags","Red flags",[1461,1648,1649,1655,1658],{},[987,1650,1651,1652],{},"You have an entity (say, a customer) and you want to make a place where users can edit it. But the amount of\ninformation is huge. For example, you have a few sections. Each section has a large form. There are a lot of\nhints and tips, validation, confirmation dialogs, and so on. In this case, it deserves a page, that has a\ndedicated URL ",[1609,1653,1654],{},"\u002Fcustomers\u002F{id}",[987,1656,1657],{},"If your content doesn't fit the screen and the modal has a scroll. Especially if it's a form with validation.",[987,1659,1660],{},"If in the process of development, you decided to make the modal very big, so that almost covers the whole screen.\nIn this case, it almost resembles a dedicated page. Which has the \"return back\" link instead of the \"x\" icon\nfor closing the modal.",[1049,1662,1664],{"id":1663},"real-life-example-of-bad-usage","Real life example of bad usage",[15,1666,1667],{},"There is a typical situation when you have a list of entities, and you need to edit them.",[736,1669],{"alt":1670,"src":1671},"Table of entities","\u002Fimg\u002Fforms-in-modals-case\u002Ftable-of-entities.png",[15,1673,1674],{},"The task was: when you click the action button, show a modal with the edit form.",[15,1676,1677],{},"Imagine the user filled out some of the fields and then accidentally closed the modal by clicking on the black overlay.\nWill they lose their data?",[15,1679,1680],{},"On the one hand we might save the data that they have just inputted. But what if the user selects another row? We should\ndisplay data related to the row selected. Thus, it won't work.",[15,1682,1683,1684,1688],{},"Now your boss makes a suggestion: let's disable closing the modal window if the user clicks on the overlay? Well...\nmight sound a little bit weird, since it's a common behaviour (check\nout ",[19,1685,1687],{"href":1292,"rel":1686},[23],"Jakob's law","). But okay, it might sound like an option.",[15,1690,1691],{},"Now, you realize that you forgot that the modal can be closed by pushing the Esc button. So you disable this behaviour\nas well.",[15,1693,1694],{},"But you cannot simply disable any way of closing the modal, right? Otherwise, how would users hide it? You will still\nhave a close button and users will run into the same issue: they will lose the data.",[15,1696,1697],{},"Now your boss makes another suggestion: how about notifying them that \"hey, you haven't submitted the form, are you sure\nyou want to close the window?\". Well... you realize that you need to implement this as well by checking if the data is\ndirty.",[15,1699,1700],{},"Alright, but may I ask you a question?",[15,1702,1703],{},[1515,1704,1705],{},"What's the difference between a dedicated page that has a link \"return back to customers\", and a modal that you cannot\nclose by clicking on the overlay?",[15,1707,1708],{},[1515,1709,1710],{},"When the only way to close it is by clicking the close button\u002Ficon which in fact returns you back to the table as\nwell.",[41,1712,1714],{"id":1713},"tips","Tips",[1049,1716,1718],{"id":1717},"when-to-use","When to use",[15,1720,1721,1722,1725],{},"The most common rule is: ",[886,1723,1724],{},"if you need to interrupt users and ask for some critical information so that they can\ncontinue",". Again, this is what stated by NNGroup.",[15,1727,1728],{},"However, this is a bit ambiguous. If you show a modal when users click on the \"edit\" button in the list of customers,\nis it critical to show them the modal so that they can...edit a customer? Well, yes.",[15,1730,1731],{},"But in this case we will have all the problems described above.",[15,1733,1734],{},"So my advice would be:",[1461,1736,1737,1740,1743,1750],{},[987,1738,1739],{},"If you cannot clearly see the benefits of using modals, don't use them",[987,1741,1742],{},"If the modal contains too many elements, be careful and consider using a dedicated page. Or pay special attention\nto avoid all the pitfalls it might have.",[987,1744,1745,1746,1749],{},"It's okay to use them for such things as confirmation dialogs. E.g. if users want to delete their account it\nwould be a good idea to use a modal. Since the action is critical you ",[886,1747,1748],{},"have to"," interrupt them. At the same time,\nthe modal itself won't have many things inside it.",[987,1751,1752],{},"It's okay to use them if the context of using them is secondary. What I mean is the modal would never need to be\nshared. It doesn't replace the entity page (e.g. user profile or customer page). And it serves supplementary\nactions. For example, in email service providers it can be the \"send test email\" modal.",[736,1754],{"alt":1755,"src":1756},"A screenshot from Convertkit application showing sending test email dialog","\u002Fimg\u002Fforms-in-modals-case\u002Fconvertkit-send-test-email.png",[1758,1759,1760,1765],"v-alert",{},[778,1761,1762],{"v-slot:title":593},[15,1763,1764],{},"Is the dropdown on the screenshot above a modal dialog?",[778,1766,1767,1770,1773],{"v-slot:content":593},[15,1768,1769],{},"I consider it to be a modal dialog.",[15,1771,1772],{},"If we return to the definition, it says that it should appear on the top of the main content and requires user\ninteraction. The dialog above appears on click, and until I click somewhere else it will stay there. So it requires\nmy attention and interaction. And it covers part of the email template.",[15,1774,1775],{},"By the way, in this case it is a modal dialog inside a modal dialog. Because the whole page is a full screen modal.",[1049,1777,1779],{"id":1778},"title","Title",[15,1781,1782,1783],{},"Modals should have a title. Since you get users out of their current context, they should know what is going on and\nwhat you ask from them. Same for pages. The concept is\ncalled ",[19,1784,1787],{"href":1785,"rel":1786},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fvisibility-system-status\u002F",[23],"Visibility of System Status",[1758,1789,1790,1795],{},[778,1791,1792],{"v-slot:title":593},[15,1793,1794],{},"Title and primary action should match",[778,1796,1797],{"v-slot:content":593},[15,1798,1799],{},"Imagine you have a modal for sending a test email notification. If the title says \"Send test email\", then the submit\nbutton should say \"Send\", but not \"Submit\". Small details matter.",[1049,1801,1803],{"id":1802},"autofocus","Autofocus",[15,1805,1806],{},"If you have a form inside a modal, a nice addition to the user experience would be autofocusing the first input\nright after the modal has appeared. This will reduce the amount of clicks users need to make.",[1049,1808,1810],{"id":1809},"closing-options","Closing options",[15,1812,1813],{},"Make sure that the modal can be closed by",[984,1815,1816,1819,1822,1825],{},[987,1817,1818],{},"Esc button (remember there is accessibility!)",[987,1820,1821],{},"Clicking on the overlay",[987,1823,1824],{},"Clicking on the \"X\" icon at the right top corner",[987,1826,1827],{},"Clicking on a \"cancel\" or \"close\" button inside the modal",[41,1829,1831],{"id":1830},"conclusion","Conclusion",[15,1833,1834],{},"While this article barely covers every possible scenario of using modals, I encourage you to think twice before\nusing them. I'm not saying that you cannot do so, many apps do. But this UI element requires more attention than\nyou can think.",[41,1836,816],{"id":815},[984,1838,1839,1845,1850],{},[987,1840,1841,1844],{},[19,1842,1787],{"href":1843},"\u002Farticles\u002Fvisibility-of-system-status"," – A foundational UX principle that reminds us to\nkeep users informed about what’s happening in the interface, with real-life and digital examples.",[987,1846,1847,1849],{},[19,1848,1019],{"href":1156}," -\nA comparison of common layout patterns and when each one makes sense.",[987,1851,1852,1854],{},[19,1853,1163],{"href":1326}," - A look at small form design\ndecisions that can make or break usability — and why some details matter more than they seem.",{"title":593,"searchDepth":594,"depth":594,"links":1856},[1857,1858,1859,1860,1864,1867,1868,1872,1878,1879],{"id":1389,"depth":594,"text":1390},{"id":1423,"depth":594,"text":1424},{"id":1455,"depth":594,"text":1456},{"id":1493,"depth":594,"text":1494,"children":1861},[1862,1863],{"id":1500,"depth":1146,"text":1501},{"id":1546,"depth":1146,"text":1547},{"id":1573,"depth":594,"text":1574,"children":1865},[1866],{"id":1593,"depth":1146,"text":1594},{"id":1603,"depth":594,"text":1604},{"id":1621,"depth":594,"text":1622,"children":1869},[1870,1871],{"id":1645,"depth":1146,"text":1646},{"id":1663,"depth":1146,"text":1664},{"id":1713,"depth":594,"text":1714,"children":1873},[1874,1875,1876,1877],{"id":1717,"depth":1146,"text":1718},{"id":1778,"depth":1146,"text":1779},{"id":1802,"depth":1146,"text":1803},{"id":1809,"depth":1146,"text":1810},{"id":1830,"depth":594,"text":1831},{"id":815,"depth":594,"text":816},"Modals look like an easy solution to many UI problems — but they can cause more harm than good.  Here's a deep dive into real-world issues with modals, and when it's better to avoid them.\n","\u002Fimg\u002Fforms-in-modals-case\u002Fsocial.png",{"image":1883},{"src":1881},"\u002Farticles\u002Fmodals-and-user-experience",{"title":1348,"description":1880},{"loc":1884},"articles\u002F07.Modals-and-user-experience","P4d_l3BBq1ESWp03LIvclQEDIJ-jh76M2qb7jH3GMrM",{"id":1890,"title":1891,"body":1892,"date":2476,"description":2477,"extension":617,"head":618,"imageUrl":619,"meta":2478,"navigation":621,"ogImage":618,"path":2479,"robots":618,"schemaOrg":618,"seo":2480,"sitemap":2481,"stem":2482,"__hash__":2483},"articles\u002Farticles\u002F08.Make text more readable on background images.md","How to make text stand out from the background image and make it more readable",{"type":8,"value":1893,"toc":2466},[1894,1897,1900,1907,1910,1914,1917,1925,1928,1931,1934,1938,1947,1952,1955,1973,1976,1979,1984,1996,2001,2015,2023,2031,2034,2037,2041,2044,2047,2050,2062,2197,2200,2203,2218,2221,2224,2347,2350,2353,2357,2361,2364,2367,2370,2373,2377,2386,2389,2392,2396,2400,2403,2406,2410,2419,2422,2425,2433,2435,2462],[11,1895,1891],{"id":1896},"how-to-make-text-stand-out-from-the-background-image-and-make-it-more-readable",[15,1898,1899],{},"A common problem is placing text on images.",[15,1901,1902,1903,1906],{},"The challenge isn't that you can't literally place it on an image, but rather an accessibility issue:\nhow to make sure that the text will be ",[886,1904,1905],{},"readable"," on a photo?\nEspecially if it's uploaded by users, and you don't know in advance what it's going to look like.",[15,1908,1909],{},"In this article, I'll try to cover most of the solutions to make text accessible.",[41,1911,1913],{"id":1912},"when-the-issue-arises","When the issue arises?",[15,1915,1916],{},"We should consider two cases:",[1461,1918,1919,1922],{},[987,1920,1921],{},"When you know in advance what image will be used",[987,1923,1924],{},"When you don't know which image will be used, e.g. users upload their images",[15,1926,1927],{},"In both cases, you can face text accessibility issues. To demonstrate this, let's have a look at the following picture.",[1929,1930],"image-with-text",{},[15,1932,1933],{},"Apparently, the text is not easy to read because it has low contrast.\nDepending on whether we know which image is going to be used, we can apply different techniques.\nBut first, let's define what contrast is.",[41,1935,1937],{"id":1936},"what-is-contrast","What is contrast?",[15,1939,1940,1941,1946],{},"There are few models that define contrast. One which is widely adopted is WCAG.\nThe latest version of WCAG (2.2) defines ",[19,1942,1945],{"href":1943,"rel":1944},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F#dfn-contrast-ratio",[23],"contrast ratio"," as follows:",[1192,1948,1949],{},[15,1950,1951],{},"(L1 + 0.05) \u002F (L2 + 0.05)",[15,1953,1954],{},"Where",[984,1956,1957,1966],{},[987,1958,1959,1960,1965],{},"L1 is the ",[19,1961,1964],{"href":1962,"rel":1963},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F#dfn-relative-luminance",[23],"relative luminance"," of the lighter of the colors, and",[987,1967,1968,1969,1972],{},"L2 is the ",[19,1970,1964],{"href":1962,"rel":1971},[23]," of the darker of the colors.",[15,1974,1975],{},"While this might sound intimidating, what we need to know is whether the text has good contrast or not.",[15,1977,1978],{},"However, what is a good contrast? There are two levels: AA and AAA.",[15,1980,1981],{},[886,1982,1983],{},"AA Contrast Requirements",[984,1985,1986,1993],{},[987,1987,1988,1989,1992],{},"For regular text and images of text, a contrast ratio of at least ",[886,1990,1991],{},"4.5:1"," is required.",[987,1994,1995],{},"For large text (at least 18 point or 14 point bold) and large images of text, a lower contrast ratio of at least **3:1\n** is acceptable.",[15,1997,1998],{},[886,1999,2000],{},"AAA Contrast Requirements",[984,2002,2003,2010],{},[987,2004,2005,2006,2009],{},"This level requires a higher contrast ratio of at least ",[886,2007,2008],{},"7:1"," for normal text and images of text.",[987,2011,2012,2013,1992],{},"For large text and images of text, a contrast ratio of at least ",[886,2014,1991],{},[15,2016,2017,2018,1368],{},"The easiest way to check if you meet the requirements is to use\na ",[19,2019,2022],{"href":2020,"rel":2021},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[23],"contrast checker",[15,2024,2025,2026,1368],{},"But how do we know if the text on an image meets AA\u002FAAA requirements when the background is not static? Well,\nthere is an awesome ",[19,2027,2030],{"href":2028,"rel":2029},"https:\u002F\u002Fcodepen.io\u002Fyaphi1\u002Fpen\u002FoNbEqGV",[23],"tool from Yaphi",[15,2032,2033],{},"However, all this works fine if we know in advance which image we will use.",[15,2035,2036],{},"A more common scenario occurs when users upload their images, not us.\nI will go over all the techniques to make the text stand out more from the background image.\nMost of these techniques (if not all) work for both scenarios.",[1049,2038,2040],{"id":2039},"adding-an-overlay","Adding an overlay",[15,2042,2043],{},"This is the most popular method to make text more readable. You should simply add a dark overlay above the image.",[15,2045,2046],{},"It can be done manually, if we know which image we're going to use in advance, or via CSS if the image is unknown.\nIt might not be exactly black color with some transparency. Other colors can be used as well, if we stick to our\ngoal to make the text accessible.",[2048,2049],"image-with-text-and-dark-overlay",{},[15,2051,2052,2053,2056,2057,2061],{},"Here’s a sample Tailwind-based code snippet. The key class that does the work is ",[1609,2054,2055],{},"brightness-50",".\nEssentially it applies ",[19,2058,2060],{"href":2059},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ffilter","filter: brightness(0.5)","\nwhich is widely supported.",[2063,2064,2068],"pre",{"className":2065,"code":2066,"language":2067,"meta":593,"style":593},"language-html shiki shiki-themes github-dark","\u003Cdiv class=\"relative\">\n  \u003Cimg src=\"\u002Fimg\u002Ftext-on-images\u002Fsample.png\" class=\"brightness-50\" alt=\"\">\n  \u003Cdiv class=\"absolute inset-0 flex items-center justify-center\">\n    \u003Cdiv class=\"text-center max-w-lg text-white text-4xl\">\n      How to stop procrastinating and get to work?\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[1609,2069,2070,2096,2129,2144,2161,2167,2177,2187],{"__ignoreMap":593},[2071,2072,2075,2079,2082,2086,2089,2093],"span",{"class":2073,"line":2074},"line",1,[2071,2076,2078],{"class":2077},"s95oV","\u003C",[2071,2080,36],{"class":2081},"s4JwU",[2071,2083,2085],{"class":2084},"svObZ"," class",[2071,2087,2088],{"class":2077},"=",[2071,2090,2092],{"class":2091},"sU2Wk","\"relative\"",[2071,2094,2095],{"class":2077},">\n",[2071,2097,2098,2101,2104,2107,2109,2112,2114,2116,2119,2122,2124,2127],{"class":2073,"line":594},[2071,2099,2100],{"class":2077},"  \u003C",[2071,2102,2103],{"class":2081},"img",[2071,2105,2106],{"class":2084}," src",[2071,2108,2088],{"class":2077},[2071,2110,2111],{"class":2091},"\"\u002Fimg\u002Ftext-on-images\u002Fsample.png\"",[2071,2113,2085],{"class":2084},[2071,2115,2088],{"class":2077},[2071,2117,2118],{"class":2091},"\"brightness-50\"",[2071,2120,2121],{"class":2084}," alt",[2071,2123,2088],{"class":2077},[2071,2125,2126],{"class":2091},"\"\"",[2071,2128,2095],{"class":2077},[2071,2130,2131,2133,2135,2137,2139,2142],{"class":2073,"line":1146},[2071,2132,2100],{"class":2077},[2071,2134,36],{"class":2081},[2071,2136,2085],{"class":2084},[2071,2138,2088],{"class":2077},[2071,2140,2141],{"class":2091},"\"absolute inset-0 flex items-center justify-center\"",[2071,2143,2095],{"class":2077},[2071,2145,2147,2150,2152,2154,2156,2159],{"class":2073,"line":2146},4,[2071,2148,2149],{"class":2077},"    \u003C",[2071,2151,36],{"class":2081},[2071,2153,2085],{"class":2084},[2071,2155,2088],{"class":2077},[2071,2157,2158],{"class":2091},"\"text-center max-w-lg text-white text-4xl\"",[2071,2160,2095],{"class":2077},[2071,2162,2164],{"class":2073,"line":2163},5,[2071,2165,2166],{"class":2077},"      How to stop procrastinating and get to work?\n",[2071,2168,2170,2173,2175],{"class":2073,"line":2169},6,[2071,2171,2172],{"class":2077},"    \u003C\u002F",[2071,2174,36],{"class":2081},[2071,2176,2095],{"class":2077},[2071,2178,2180,2183,2185],{"class":2073,"line":2179},7,[2071,2181,2182],{"class":2077},"  \u003C\u002F",[2071,2184,36],{"class":2081},[2071,2186,2095],{"class":2077},[2071,2188,2190,2193,2195],{"class":2073,"line":2189},8,[2071,2191,2192],{"class":2077},"\u003C\u002F",[2071,2194,36],{"class":2081},[2071,2196,2095],{"class":2077},[15,2198,2199],{},"However, the overlay should not necessarily be dark.",[15,2201,2202],{},"This is a nice trick I learned from RefactoringUI. The idea is to",[1461,2204,2205,2208,2211],{},[987,2206,2207],{},"Desaturate your image (set saturation to zero). So that it has only white and black colors",[987,2209,2210],{},"Put an overlay on top of the image with your brand color (or any color you want)",[987,2212,2213,2214,2217],{},"Select ",[1609,2215,2216],{},"multiply"," as the blend mode (in Figma or another editor)",[2219,2220],"image-with-text-and-colored-overlay",{},[15,2222,2223],{},"Here is a sample code for this:",[2063,2225,2227],{"className":2065,"code":2226,"language":2067,"meta":593,"style":593},"\u003Cdiv class=\"relative\">\n  \u003Cimg src=\"\u002Fimg\u002Ftext-on-images\u002Fsample.png\" class=\"grayscale\" alt=\"\"\u002F>\n  \u003Cdiv class=\"absolute inset-0 flex items-center justify-center bg-teal-500 mix-blend-multiply\"\u002F>\n  \u003Cdiv class=\"absolute inset-0 flex items-center justify-center\">\n    \u003Cdiv class=\"text-center max-w-lg text-white text-4xl\">\n      How to stop procrastinating and get to work?\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[1609,2228,2229,2243,2271,2290,2304,2318,2322,2330,2338],{"__ignoreMap":593},[2071,2230,2231,2233,2235,2237,2239,2241],{"class":2073,"line":2074},[2071,2232,2078],{"class":2077},[2071,2234,36],{"class":2081},[2071,2236,2085],{"class":2084},[2071,2238,2088],{"class":2077},[2071,2240,2092],{"class":2091},[2071,2242,2095],{"class":2077},[2071,2244,2245,2247,2249,2251,2253,2255,2257,2259,2262,2264,2266,2268],{"class":2073,"line":594},[2071,2246,2100],{"class":2077},[2071,2248,2103],{"class":2081},[2071,2250,2106],{"class":2084},[2071,2252,2088],{"class":2077},[2071,2254,2111],{"class":2091},[2071,2256,2085],{"class":2084},[2071,2258,2088],{"class":2077},[2071,2260,2261],{"class":2091},"\"grayscale\"",[2071,2263,2121],{"class":2084},[2071,2265,2088],{"class":2077},[2071,2267,2126],{"class":2091},[2071,2269,2270],{"class":2077},"\u002F>\n",[2071,2272,2273,2275,2277,2279,2281,2284,2288],{"class":2073,"line":1146},[2071,2274,2100],{"class":2077},[2071,2276,36],{"class":2081},[2071,2278,2085],{"class":2084},[2071,2280,2088],{"class":2077},[2071,2282,2283],{"class":2091},"\"absolute inset-0 flex items-center justify-center bg-teal-500 mix-blend-multiply\"",[2071,2285,2287],{"class":2286},"s6RL2","\u002F",[2071,2289,2095],{"class":2077},[2071,2291,2292,2294,2296,2298,2300,2302],{"class":2073,"line":2146},[2071,2293,2100],{"class":2077},[2071,2295,36],{"class":2081},[2071,2297,2085],{"class":2084},[2071,2299,2088],{"class":2077},[2071,2301,2141],{"class":2091},[2071,2303,2095],{"class":2077},[2071,2305,2306,2308,2310,2312,2314,2316],{"class":2073,"line":2163},[2071,2307,2149],{"class":2077},[2071,2309,36],{"class":2081},[2071,2311,2085],{"class":2084},[2071,2313,2088],{"class":2077},[2071,2315,2158],{"class":2091},[2071,2317,2095],{"class":2077},[2071,2319,2320],{"class":2073,"line":2169},[2071,2321,2166],{"class":2077},[2071,2323,2324,2326,2328],{"class":2073,"line":2179},[2071,2325,2172],{"class":2077},[2071,2327,36],{"class":2081},[2071,2329,2095],{"class":2077},[2071,2331,2332,2334,2336],{"class":2073,"line":2189},[2071,2333,2182],{"class":2077},[2071,2335,36],{"class":2081},[2071,2337,2095],{"class":2077},[2071,2339,2341,2343,2345],{"class":2073,"line":2340},9,[2071,2342,2192],{"class":2077},[2071,2344,36],{"class":2081},[2071,2346,2095],{"class":2077},[15,2348,2349],{},"An interesting fact that I found out is that when you de-saturate the original image, then put a color overlay and\nblend it, it reduces the file size.",[15,2351,2352],{},"Apparently because the image now has a narrower range of color shades, which\nresults in the fact that there is less different type of pixels (I'm not 100% sure though, but I guess it's the reason).",[736,2354],{"alt":2355,"src":2356},"How color overlay reduces file size","\u002Fimg\u002Ftext-on-images\u002Fcomparing-sizes.png",[1049,2358,2360],{"id":2359},"putting-text-in-a-box","Putting text in a box",[15,2362,2363],{},"Another approach is to increase contrast locally — by placing the text inside a semi-transparent box.",[2365,2366],"image-with-text-in-black-box",{},[15,2368,2369],{},"The box can again have different colors, be opaque, or have a blurred background.\nIt doesn't matter as long as the text inside it is readable.",[2371,2372],"image-with-text-in-white-box",{},[1049,2374,2376],{"id":2375},"using-linear-gradients","Using linear gradients",[15,2378,2379,2380,2385],{},"Here, I took an image from ",[19,2381,2384],{"href":2382,"rel":2383},"https:\u002F\u002Fhundred.user-interface.io",[23],"my book",", as it demonstrates the difference between\nsimply putting a dark overlay and using a linear gradient approach.",[15,2387,2388],{},"If you know where you're going to place the text, you can make a gradient that goes\ntoward the text, while the rest of the image remains clearer.",[15,2390,2391],{},"Take a look at the third card.",[736,2393],{"alt":2394,"src":2395},"An image illustrating three variations of text placed on background image","\u002Fimg\u002Ftext-on-images\u002Fgradient-on-images.png",[41,2397,2399],{"id":2398},"wcag-might-not-always-work","WCAG might not always work",[15,2401,2402],{},"The current WCAG algorithm may not be effective in all situations.\nThere are edge cases where it may lead to incorrect results.",[15,2404,2405],{},"The most famous one involves an orange button with black and white text on it:",[736,2407],{"alt":2408,"src":2409},"An image illustrating two orange buttons with black and white text on them","\u002Fimg\u002Ftext-on-images\u002Fcontrast-edge-cases.png",[15,2411,2412,2413,2418],{},"There was ",[19,2414,2417],{"href":2415,"rel":2416},"https:\u002F\u002Fwww.bounteous.com\u002Finsights\u002F2019\u002F03\u002F22\u002Forange-you-accessible-mini-case-study-color-ratio",[23],"a study","\ncomparing which button is easier to read.",[15,2420,2421],{},"You might naturally think the left button is easier to read, but the contrast checker shows\nthat the right one meets the standard, while the left does not.",[15,2423,2424],{},"This discrepancy occurs because the current algorithm does not account for several factors.\nHowever, a new algorithm called ACPA is likely to be adopted in WCAG 3.",[15,2426,2427,2428,1368],{},"You can play around with\nthe ",[19,2429,2432],{"href":2430,"rel":2431},"https:\u002F\u002Fwww.achecks.org\u002Fapca-wcag-3-accessible-colour-contrast-checker\u002F",[23],"ACPA contrast checker",[41,2434,816],{"id":815},[984,2436,2437,2441,2446,2454],{},[987,2438,2439,1844],{},[19,2440,1787],{"href":1843},[987,2442,2443,2445],{},[19,2444,1348],{"href":1884}," - A deep dive into when modals help — and when they\nsilently ruin UX. Includes real-world patterns, accessibility concerns, and implementation traps.",[987,2447,2448,2453],{},[19,2449,2452],{"href":2450,"rel":2451},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2023\u002F08\u002Fdesigning-accessible-text-over-images-part1",[23],"Designing Accessible Text Over Images: Part 1"," -\nA Smashing Magazine guide with theory, contrast rules, and design foundations for legible text over imagery.",[987,2455,2456,2461],{},[19,2457,2460],{"href":2458,"rel":2459},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2023\u002F08\u002Fdesigning-accessible-text-over-images-part2",[23],"Designing Accessible Text Over Images: Part 2"," -\nThe second part focuses on CSS techniques, overlays, and practical implementation tips — highly recommended.",[2463,2464,2465],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}",{"title":593,"searchDepth":594,"depth":594,"links":2467},[2468,2469,2474,2475],{"id":1912,"depth":594,"text":1913},{"id":1936,"depth":594,"text":1937,"children":2470},[2471,2472,2473],{"id":2039,"depth":1146,"text":2040},{"id":2359,"depth":1146,"text":2360},{"id":2375,"depth":1146,"text":2376},{"id":2398,"depth":594,"text":2399},{"id":815,"depth":594,"text":816},"2024-05-01T01:38:48+04:00","Placing text on images seems easy — until users upload their own.  Here's a practical guide to making sure your text stays readable, accessible, and well-designed in any case.\n",{},"\u002Farticles\u002Fmake-text-more-readable-on-background-images",{"title":1891,"description":2477},{"loc":2479},"articles\u002F08.Make text more readable on background images","zHXkK9UYFVIN64MqyLPUaQorxh59gYsTR3D-jxy8LQo",{"id":2485,"title":2486,"body":2487,"date":2491,"description":2492,"extension":617,"head":618,"imageUrl":2493,"meta":2494,"navigation":621,"ogImage":618,"path":2496,"robots":618,"schemaOrg":618,"seo":2497,"sitemap":618,"stem":2498,"__hash__":2499},"articles\u002Farticles\u002F09.Destructive-actions.md","How To Manage Dangerous Actions In User Interfaces",{"type":8,"value":2488,"toc":2489},[],{"title":593,"searchDepth":594,"depth":594,"links":2490},[],"2024-10-27T14:02:02+04:00","How to design dangerous actions in user interfaces: confirmations, warnings, and patterns that help prevent costly user mistakes.\n","\u002Fimg\u002Fdestructive-actions\u002Fdelete-confirmation.png",{"external":621,"link":2495},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2024\u002F09\u002Fhow-manage-dangerous-actions-user-interfaces\u002F","\u002Farticles\u002Fdestructive-actions",{"title":2486,"description":2492},"articles\u002F09.Destructive-actions","f7G28gqG9H-vRn4eiS-GloUQnuzdkgVPN2swVLsTffc",{"id":2501,"title":2502,"body":2503,"date":2712,"description":2713,"extension":617,"head":618,"imageUrl":2621,"meta":2714,"navigation":621,"ogImage":618,"path":2715,"robots":618,"schemaOrg":618,"seo":2716,"sitemap":2717,"stem":2718,"__hash__":2719},"articles\u002Farticles\u002F10.What-are-affordances-and-signifiers-in-ux.md","What are affordances and signifiers in UX?",{"type":8,"value":2504,"toc":2699},[2505,2509,2512,2516,2525,2528,2533,2537,2540,2543,2546,2550,2553,2556,2559,2562,2565,2569,2572,2587,2591,2594,2599,2603,2606,2609,2612,2615,2618,2622,2626,2640,2644,2647,2650,2654,2661,2664,2666],[11,2506,2508],{"id":2507},"what-are-affordances-and-signifiers-in-ux-and-how-they-work-together","What Are Affordances and Signifiers in UX — and How They Work Together",[15,2510,2511],{},"While these terms may sound somewhat complicated, it's really important to understand what do they mean and keep\nin mind that such things exist. And most importantly, how to recognize and apply them.",[41,2513,2515],{"id":2514},"what-are-affordances","What Are Affordances?",[15,2517,2518,2519,2524],{},"Affordances are the qualities of an object that hint at how it can be used. This idea was first introduced by\n",[19,2520,2523],{"href":2521,"rel":2522},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAffordance",[23],"psychologist James J. Gibson back in 1977",". In simple terms, affordances tell\nus what actions are possible with an object.",[15,2526,2527],{},"There is a definition from Don Norman, the author of the famous book called \"The design of everyday things\":",[1192,2529,2530],{},[15,2531,2532],{},"Affordances represent the possibilities in the world for how the agent (a person, animal or machine) can interact with\nsomething. The presence of an affordance is jointly determined by the qualities of the object and the abilities of the\nagent that is interacting",[1049,2534,2536],{"id":2535},"real-life-example-of-affordance","Real-Life Example of Affordance",[1484,2538,2539],{},"\nDoor Handle\n",[15,2541,2542],{},"A door handle naturally suggests that you should grab and pull it to open the door.\nThe shape and placement of the handle make it obvious what you’re supposed to do. But!",[15,2544,2545],{},"There is a very important difference we can see, that illustrates affordances in all its glory. Look at these two doors.",[736,2547],{"alt":2548,"src":2549},"Two different types of door handles, showing the different affordances","\u002Fimg\u002Faffordances\u002Fdoors.png",[15,2551,2552],{},"The first door can only be pushed. You cannot pull it since there is nothing you can grab. Moreover, they also\nprovided some text, saying that the plates uses silver ions that kills 99.9% of bacteria (which is nice).",[15,2554,2555],{},"The second door cannot be pushed, because the handle requires you to turn it to open the door. However, it's not\nexactly true, you can open a door both inside and outside.",[15,2557,2558],{},"But this example perfectly illustrates what an affordance is.",[15,2560,2561],{},"There is a famous video that shows the frustration related to door handles.",[966,2563],{"src":2564},"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FyY96hTb8WgI?si=o2Wl0cxMnrOvS63G",[1049,2566,2568],{"id":2567},"affordances-in-uiux","Affordances in UI\u002FUX",[15,2570,2571],{},"Here are some examples.",[1461,2573,2574,2581,2584],{},[987,2575,2576,2577,2580],{},"Buttons: They’re designed to be clicked. A well-designed button might even look slightly raised, so it feels like\nsomething you should press. Or at least it should ",[1515,2578,2579],{},"look like a button",", so that users can easily guess that it's\nclickable.",[987,2582,2583],{},"Text Fields: These areas on a form invite you to type. The blinking cursor inside the field is a strong hint that you\nshould start entering text.",[987,2585,2586],{},"Sliders: Sliders are built to be dragged, helping you adjust settings like volume or brightness.",[41,2588,2590],{"id":2589},"what-are-signifiers","What Are Signifiers?",[15,2592,2593],{},"Signifiers are cues that tell you where and how to take action. Again, according to Don Norman:",[1192,2595,2596],{},[15,2597,2598],{},"The term signifier refers to any mark or sound, any perceivable indicator that communicates appropriate behavior to a\nperson.",[1049,2600,2602],{"id":2601},"real-life-examples-of-signifiers","Real-Life Examples of Signifiers",[1484,2604,2605],{},"\nPush or Pull Labels on a Door\n",[15,2607,2608],{},"Before we found out that a door that doesn't have a handle but rather a metal plate has one affordance - you can only\npush it. But if you add labels, they will behave like signifiers",[1484,2610,2611],{},"\nTraffic Lights Signs\n",[15,2613,2614],{},"If you stay at a pedestrian crossing and see a green light, it means that you can\ncross the road. But if the green light is in a form of a human who is crossing the road, it gives you extra clue.",[15,2616,2617],{},"By the way, this is especially important for people with eye diseases, that might not see the colors as other do.",[736,2619],{"alt":2620,"src":2621},"Labels of doors that work as signifiers. And traffic lights with additional signs that also work as signifiers.","\u002Fimg\u002Faffordances\u002Fsignifiers.png",[1049,2623,2625],{"id":2624},"signifiers-in-uiux","Signifiers in UI\u002FUX",[1461,2627,2628,2631,2634,2637],{},[987,2629,2630],{},"Button Labels: Words like “Submit” or “Cancel” on a button tell you exactly what will happen when you click it.",[987,2632,2633],{},"Icons: A trash can icon lets you know that dragging something into it will delete the item.",[987,2635,2636],{},"Color Changes: A button that changes color when you hover over it or click it signals that it’s interactive and gives\nfeedback that your action was registered.",[987,2638,2639],{},"Arrows: Arrows pointing left or right show that you can navigate through a slideshow or flip through pages.",[1049,2641,2643],{"id":2642},"how-affordances-and-signifiers-work-together","How Affordances and Signifiers Work Together",[15,2645,2646],{},"Affordances and signifiers often work hand-in-hand. While affordances show what actions are possible, signifiers guide\nyou on how to perform those actions. Without clear signifiers, even obvious affordances might go unnoticed, leading to\nconfusion.",[15,2648,2649],{},"In real life, as we've seen earlier, it may be a door handle with a label. In UI\u002FUX, you can enhance a button by adding\nan meaningful icon for example.",[1049,2651,2653],{"id":2652},"why-it-matters","Why It Matters",[15,2655,2656,2657,2660],{},"Getting affordances and signifiers right is crucial for ",[886,2658,2659],{},"usability",". They work together to guide\nusers through your product naturally, without needing instructions or causing frustration.",[15,2662,2663],{},"Think of them as invisible helpers: affordances whisper what’s possible, signifiers show the way.",[41,2665,816],{"id":815},[984,2667,2668,2673,2678,2685,2692],{},[987,2669,2670,2672],{},[19,2671,1163],{"href":1326}," – A practical look at form design, including when labels, asterisks, or hints help — and when they just add clutter.",[987,2674,2675,2677],{},[19,2676,1348],{"href":1884}," – A deep dive into the UX pitfalls of modals: how they break flow, ruin state, and what to consider before using them.",[987,2679,2680],{},[19,2681,2684],{"href":2682,"rel":2683},"https:\u002F\u002Fgraphicsinterface.org\u002Fwp-content\u002Fuploads\u002Fgi2000-24.pdf",[23],"Affordances: Clarifying and Evolving a Concept",[987,2686,2687],{},[19,2688,2691],{"href":2689,"rel":2690},"https:\u002F\u002Fuxplanet.org\u002Fall-about-affordance-and-signifier-terms-by-don-norman-the-ux-pioneer-e0ea7b9b99f5",[23],"All about affordance and signifier: terms by Don Norman, the UX pioneer",[987,2693,2694],{},[19,2695,2698],{"href":2696,"rel":2697},"https:\u002F\u002Fbootcamp.uxdesign.cc\u002Fsignifiers-in-design-f842850a0efd",[23],"Signifiers in Design",{"title":593,"searchDepth":594,"depth":594,"links":2700},[2701,2705,2711],{"id":2514,"depth":594,"text":2515,"children":2702},[2703,2704],{"id":2535,"depth":1146,"text":2536},{"id":2567,"depth":1146,"text":2568},{"id":2589,"depth":594,"text":2590,"children":2706},[2707,2708,2709,2710],{"id":2601,"depth":1146,"text":2602},{"id":2624,"depth":1146,"text":2625},{"id":2642,"depth":1146,"text":2643},{"id":2652,"depth":1146,"text":2653},{"id":815,"depth":594,"text":816},"2024-08-15T04:51:05+04:00","Affordances and signifiers are key concepts in UX. Here’s what they mean and how they differ — with real-world and UI examples.\n",{},"\u002Farticles\u002Fwhat-are-affordances-and-signifiers-in-ux",{"title":2502,"description":2713},{"loc":2715},"articles\u002F10.What-are-affordances-and-signifiers-in-ux","d_vBqdMSgN0Fanu5-r57MZjwNIFbpsfL1Iv0lgP773Y",{"id":2721,"title":2722,"body":2723,"date":3450,"description":3451,"extension":617,"head":618,"imageUrl":3452,"meta":3453,"navigation":621,"ogImage":618,"path":3454,"robots":618,"schemaOrg":618,"seo":3455,"sitemap":3456,"stem":3457,"__hash__":3458},"articles\u002Farticles\u002F11.Blue-sky-vs-twitter.md","Why BlueSky is better than Twitter",{"type":8,"value":2724,"toc":3431},[2725,2728,2750,2754,2757,2760,2764,2773,2776,2816,2819,2823,2833,2837,2846,2860,2868,2883,2891,2894,2898,2901,2905,2908,2977,2980,2984,2987,2998,3001,3004,3010,3014,3017,3021,3024,3027,3033,3037,3044,3047,3050,3053,3056,3059,3062,3066,3069,3072,3076,3080,3083,3086,3089,3093,3096,3107,3110,3114,3120,3123,3126,3129,3132,3139,3142,3146,3149,3152,3155,3159,3163,3166,3169,3172,3175,3179,3182,3186,3189,3192,3196,3199,3204,3207,3214,3218,3221,3224,3234,3237,3240,3244,3247,3250,3253,3257,3260,3269,3273,3275,3282,3298,3302,3305,3308,3312,3315,3319,3322,3334,3341,3346,3349,3369,3372,3375,3378,3381,3384,3387,3397,3401,3408,3416,3420],[11,2726,2722],{"id":2727},"why-bluesky-is-better-than-twitter",[1355,2729,2730,2733,2736,2741,2747],{},[15,2731,2732],{},"In the past few weeks, the popularity of BlueSky literally soared.",[15,2734,2735],{},"I've seen a ton of users, especially from the \"tech Twitter\" category, who announced that they were moving\nto BlueSky or even deleting their Twitter accounts. And this happened almost instantly.",[15,2737,2738],{},[1484,2739,2740],{},"Many people describe BlueSky as an example of what Twitter should have looked like.",[15,2742,2743,2744],{},"As someone who primarily focuses on UI\u002FUX, I will review these two platforms and share my personal opinion. ",[886,2745,2746],{},"I'm sorry\nin advance that the post is not well-structured, BSky evolves so fast that I'll never finish otherwise.",[15,2748,2749],{},"If one wishes to write a book on usability or user experience, Twitter serves as an excellent example of numerous\nmistakes. Moreover, the frequent and unpredictable changes continue to be detrimental from a UI\u002FUX perspective.",[41,2751,2753],{"id":2752},"brief-stats","Brief stats",[15,2755,2756],{},"I've started writing this post a couple of weeks ago, and it's simply hard to keep up with all the news that appears\ndaily about BlueSky's growth.",[15,2758,2759],{},"Here is the screenshot I took initially.",[736,2761],{":hasBorder":776,":rounded":776,"alt":2762,"src":2763},"Google trends chart comparing threads, twitter and blue sky social networks","\u002Fimg\u002Fblue-sky\u002Fgoogle-trends.png",[15,2765,2766,2767,2772],{},"According to Google Trends, BlueSky reached a peak in October, surpassing both Twitter and Threads. I'm not sure why it\nhappened, but Elon's announcement of yet another X feature — that ",[19,2768,2771],{"href":2769,"rel":2770},"https:\u002F\u002Fwww.theverge.com\u002F2024\u002F9\u002F23\u002F24252438\u002Fx-blocked-users-view-public-posts",[23],"X will allow people you've blocked to see your\nposts"," — probably served as the catalyst.",[15,2774,2775],{},"In any case, what's important is that by November 15, 2024, we can definitely observe an interesting situation. Many\ntech influencers, famous Twitter users, and well-known individuals worldwide began migrating to BlueSky at that time.",[15,2777,2778,2783,2784,2783,2789,2783,2794,2799,2800,2783,2805,2810,2811],{},[19,2779,2782],{"href":2780,"rel":2781},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fkelseyhightower.com\u002Fpost\u002F3l6vyyvgjj72q",[23],"Some"," ",[19,2785,2788],{"href":2786,"rel":2787},"https:\u002F\u002Fx.com\u002FJoshWComeau\u002Fstatus\u002F1853923738271801665",[23],"announced",[19,2790,2793],{"href":2791,"rel":2792},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fquinnypig.bsky.social\u002Fpost\u002F3lazbqdpcgc2h",[23],"that",[19,2795,2798],{"href":2796,"rel":2797},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fme.nzen.ski\u002Fpost\u002F3lacmcajvxb2d",[23],"they","\nleft Twitter,\nwhile\n",[19,2801,2804],{"href":2802,"rel":2803},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fbell.bz\u002Fpost\u002F3l7xuvtswqj2g",[23],"others deleted",[19,2806,2809],{"href":2807,"rel":2808},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fjustinjuno.dev\u002Fpost\u002F3lac4rziouy2w",[23],"all their tweets and locked their accounts",",\nor ",[19,2812,2815],{"href":2813,"rel":2814},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fkevdog.bsky.social\u002Fpost\u002F3l6vz5uor5w2s",[23],"even completely deleted them",[15,2817,2818],{},"Today I checked Google trends for X and BlueSky for tha past 90 days in the US.",[736,2820],{":hasBorder":776,":rounded":776,"alt":2821,"src":2822},"Google trends chart comparing twitter and blue sky social networks in the past 90 days","\u002Fimg\u002Fblue-sky\u002Fgoogle-trends-2.png",[15,2824,2825,2826,2829,2830,1368],{},"With more than ",[886,2827,2828],{},"500K+ searches over the last 7 days",", BlueSky is ranked in the ",[886,2831,2832],{},"top 8 in the US",[736,2834],{":hasBorder":776,":rounded":776,"alt":2835,"src":2836},"The volume of Google traffic for the past 7 days (8-15th November).","\u002Fimg\u002Fblue-sky\u002Fgoogle-trends-3.png",[15,2838,2839,2840,2845],{},"News like this keeps coming in. For instance,\na ",[19,2841,2844],{"href":2842,"rel":2843},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fjburnmurdoch.bsky.social\u002Fpost\u002F3lata7c6dfs2t",[23],"recent post by John Burn-Murdoch",", a columnist\nand chief data reporter at the Financial Times, demonstrates that as BlueSky's user base grew, the number of Twitter\u002FX\naccount deactivations also increased concurrently.",[736,2847,2850],{":hasBorder":776,":rounded":776,"alt":2848,"src":2849},"Two charts demonstrating that BlueSky daily visits  went high while X (Twitter) deactivations als went high at the same time.\n","\u002Fimg\u002Fblue-sky\u002Ftrends-by-ft.png",[778,2851,2852],{"v-slot:description":593},[15,2853,2854,2855],{},"by ",[19,2856,2859],{"href":2857,"rel":2858},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fjburnmurdoch.bsky.social",[23],"John Burn-Murdoch",[15,2861,2862,2863,1368],{},"And now we're witnessing how it becomes #1 app in Apple app store (by November 17, 2024). Images are taken\nfrom ",[19,2864,2867],{"href":2865,"rel":2866},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fwongmjane.com\u002Fpost\u002F3lb62q5rqwc2n",[23],"Jane's post",[2869,2870,2871,2877],"two-columns",{},[778,2872,2873],{"v-slot:first":593},[736,2874],{":hasBorder":776,":rounded":776,"alt":2875,"src":2876},"The Google Play Store rankings in the US as of November 177, 2024.","\u002Fimg\u002Fblue-sky\u002Fgoogle-play.jpg",[778,2878,2879],{"v-slot:second":593},[736,2880],{":hasBorder":776,":rounded":776,"alt":2881,"src":2882},"The App Store rankings in the US as of November 17, 2024.","\u002Fimg\u002Fblue-sky\u002Fapp-store.jpg",[15,2884,2885,2886,1368],{},"And just before publishing this article, yet another post, now from the official BlueSky\naccount, ",[19,2887,2890],{"href":2888,"rel":2889},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fbsky.app\u002Fpost\u002F3lb3qyu64bs2z",[23],"saying that it crossed 18M+ users",[15,2892,2893],{},"In this article, I'll finally do what I planned to do for quite some time — roast Twitter UI and compare it to the\nBlueSky experience.",[41,2895,2897],{"id":2896},"twitter-from-usability-point-of-view","Twitter from usability point of view",[15,2899,2900],{},"It's almost impossible to have enough patience to go over each nook and cranny of Twitter UI, so I'll put it bluntly.\nHere is the start screen.",[736,2902],{":hasBorder":776,":rounded":776,"alt":2903,"src":2904},"Twitter start screen","\u002Fimg\u002Fblue-sky\u002Ftwitter.png",[15,2906,2907],{},"Let's count how many useful links we have in the navigation, including items under the \"more\" menu:",[2869,2909,2910,2942],{},[778,2911,2912],{"v-slot:first":593},[1461,2913,2914,2915,2914,2918,2914,2921,2914,2924,2914,2927,2914,2930,2914,2933,2914,2936,2914,2939],{},"\n  ",[987,2916,2917],{},"Home",[987,2919,2920],{},"Explore",[987,2922,2923],{},"Notifications",[987,2925,2926],{},"Messages",[987,2928,2929],{},"Grok",[987,2931,2932],{},"Premium",[987,2934,2935],{},"Communities",[987,2937,2938],{},"Verified Orgs",[987,2940,2941],{},"Community Notes",[778,2943,2944],{"v-slot:second":593},[1461,2945,2947,2950,2953,2956,2959,2962,2965,2968,2971,2974],{"start":2946},10,[987,2948,2949],{},"Profile",[987,2951,2952],{},"More - Lists",[987,2954,2955],{},"More - Bookmarks",[987,2957,2958],{},"More - Monetization",[987,2960,2961],{},"More - Ads",[987,2963,2964],{},"More - Jobs",[987,2966,2967],{},"More - Create Your Space",[987,2969,2970],{},"More - Settings and privacy",[987,2972,2973],{},"Account - Add an existing account",[987,2975,2976],{},"Account - Log out",[15,2978,2979],{},"Now, here is the menu of SalesForce CRM.",[736,2981],{":hasBorder":776,":rounded":776,"alt":2982,"src":2983},"SalesForce start screen","\u002Fimg\u002Fblue-sky\u002Fsales-force.png",[15,2985,2986],{},"I believe you can see what I'm driving at. The number of links is comparable to that of a CRM. While this isn't\nnecessarily a bad thing, a social network can indeed offer a wide range of features. However, does Twitter:",[1461,2988,2989,2992,2995],{},[987,2990,2991],{},"Show us necessary features?",[987,2993,2994],{},"Organizes the navigation in a reasonable way?",[987,2996,2997],{},"Uses proper icons, spacing, and words?",[15,2999,3000],{},"As I said, I'm looking from the user point of view. Whether the business benefits from it or not doesn't matter to me.\nOf course, every UX designer should take into account business goals, and in an ideal world, both sides (business and\nusers) should be happy.",[15,3002,3003],{},"But here I'm comparing two platforms to choose which one offers a better user experience. Twitter users the patterns\nthat are non-conventional, let alone the number of bugs and bots.",[15,3005,3006,3007,1368],{},"Anyway, let's simply state what is absolutely wrong in ",[1484,3008,3009],{},"my not-so-humble opinion",[41,3011,3013],{"id":3012},"whats-wrong-with-twitter-ui","What's wrong with Twitter UI?",[15,3015,3016],{},"I logged in and looked at the menu.",[1049,3018,3020],{"id":3019},"what-is-grok","What is Grok?",[15,3022,3023],{},"Some kind of AI assistant? With the same success, you can call the home page \"Korg.\" Why not?",[15,3025,3026],{},"Okay, if I understand correctly, this assistant should make tweeting easier. Instead, I have to stop writing my tweets\nand switch to Grok. It's highly likely I'll lose what I've already written. You know, in order to check my grammar or\nthink about some words, I open a new tab and ask ChatGPT instead.",[15,3028,3029,3032],{},[1484,3030,3031],{},"The problem is that it doesn't help me in any way when writing my posts,"," while every scheduling tool does\nthat. Look at how TypeFully helps with AI.",[736,3034],{":hasBorder":776,":rounded":776,"alt":3035,"src":3036},"How Typefully utilizes AI to help writing better posts","\u002Fimg\u002Fblue-sky\u002Ftypefully.gif",[15,3038,3039,3040,1368],{},"No, it's not an ad, and TypeFully doesn't support BlueSky yet, but I already mentioned their UI solutions on Smashing\nMagazine. For example, how they\nuse ",[19,3041,3043],{"href":2495,"rel":3042},[23],"inline guards",[1049,3045,2932],{"id":3046},"premium",[15,3048,3049],{},"The amount and limitations and controversy regarding Twitter's tariff plans are truly outrageous. I don't remember all\nthe logic that lies behind different plans, and there is no surprise why people constantly ask whether they should buy\nPremium or maybe Premium+?",[15,3051,3052],{},"I'm not even sure if users who have just signed up can read more than 500 or so tweets. How do you feel about this\nlimitation on reading for the free plan? It's ironic that I'm not fact-checking this, as it could have undergone\nnumerous changes already.",[15,3054,3055],{},"But back to the UI. Where would you usually expect to see information about your subscription? Right in the middle of\nnavigation?! Not in account settings, not in the top-right corner, but simply right in the middle?",[1049,3057,2935],{"id":3058},"communities",[15,3060,3061],{},"Let's see what we have here.",[736,3063],{":hasBorder":776,":rounded":776,"alt":3064,"src":3065},"Twitter's communities page","\u002Fimg\u002Fblue-sky\u002Fcommunities.png",[15,3067,3068],{},"Although I could assume the first three are my communities, it wouldn't hurt to state this explicitly. Additionally, the\npage has a feed of posts from these communities. But at the same time, Twitter has lists, where you can add members and\nsee their posts. What's the exact difference between those feeds?",[15,3070,3071],{},"While communities have richer functionality, it's still not enough. Have you ever heard that someone recommended\nTwitter (not Circle, Discord, or anything else) to create a community?",[736,3073],{":hasBorder":776,":rounded":776,"alt":3074,"src":3075},"The home page of a list","\u002Fimg\u002Fblue-sky\u002Flist.png",[736,3077],{":hasBorder":776,":rounded":776,"alt":3078,"src":3079},"The home page of accessibility community","\u002Fimg\u002Fblue-sky\u002Faccessibility.png",[15,3081,3082],{},"BlueSky also offers two similar features: lists and feeds. But that's different. Custom feeds typically lack any\ncomplicated algorithm (at least I think so). There are plenty of feeds, and you can add any of them. For instance, the \"\nPopular with friends\" feed combines popular content from accounts you follow with content that your followers find\nappealing.",[15,3084,3085],{},"Lists are just lists; you can add members to them.",[15,3087,3088],{},"Okay, let's see how well my community is doing. So we open the homepage of a community and—wait a second. Where are the\nmembers? Any information? Anything a community should have? Let's accidentally scroll up.",[736,3090],{":hasBorder":776,":rounded":776,"alt":3091,"src":3092},"The top of the accessibility community page","\u002Fimg\u002Fblue-sky\u002Faccessibility-top.png",[15,3094,3095],{},"Ah, here it is. Now, look at the red area I highlighted. I bet you won't guess what each icon means and does.",[1461,3097,3098,3101,3104],{},[987,3099,3100],{},"The sparkle icon is (of course...) not related to AI.",[987,3102,3103],{},"The upload (or download, or export) will not prompt you with anything like that.",[987,3105,3106],{},"Turning on notifications will trigger a modal that will ask you a few questions. You cannot opt to receive\nnotifications\nwhen someone posts. Maybe it's okay, since you'll get a lot of notifications, but I have a strange feeling that some\ncommunities are made for this. For instance, I receive notifications when someone sends a message in Telegram chat\ngroups. I can turn it off, but it's up to me.",[15,3108,3109],{},"And finally, the \"Joined\" button. I'm going to take a photo of how I see it, right in my room.",[736,3111],{":hasBorder":776,":rounded":776,"alt":3112,"src":3113},"A photo taken from my home with a sticker on a switcher saying 'joined'","\u002Fimg\u002Fblue-sky\u002Fjoined.png",[15,3115,3116,3117],{},"What will happen if I flick the switch on? Right, my cat will ask me to feed her; ",[1515,3118,3119],{},"I'll be right back.",[15,3121,3122],{},"Okay, I understand; sometimes people use this trick: when you hover over the button, or, for example, a table row, a\ndelete button appears. But for the community home page?!",[1484,3124,3125],{},"A button saying \"Joined\" that is used to leave the community!?",[1049,3127,2938],{"id":3128},"verified-orgs",[15,3130,3131],{},"I'll go over the icon choices later. But what are verified orgs? A list of organizations that are verified on Twitter,\nright?",[1758,3133,3134],{},[778,3135,3136],{"v-slot:content":593},[15,3137,3138],{},"By the way, my IDE says \"orgs\" is a typo. I swear it is possible to find some extra pixels to fit \"organizations,\" or,\nbetter, \"companies.\".",[15,3140,3141],{},"Like, those special organizations that are verified, and I can check them. BBC, CNN, Apple, whichever. Let's subscribe\nto cool guys then!",[736,3143],{":hasBorder":776,":rounded":776,"alt":3144,"src":3145},"A modal asking whether I would like to subscribe to one of tariff plans","\u002Fimg\u002Fblue-sky\u002Fverified-organizations.png",[15,3147,3148],{},"Ah, they ask for money. I should have guessed. Again, I'll get increased reach and four options. Let alone that the\nPremium that we already had.",[15,3150,3151],{},"In the middle of the menu, while lists, bookmarks, and spaces are hidden under the more icon.",[15,3153,3154],{},"Soon it will be like this:",[736,3156],{":hasBorder":776,":rounded":776,"alt":3157,"src":3158},"An irony showing twitter's fake page","\u002Fimg\u002Fblue-sky\u002Fhow-i-see-twitter.png",[1049,3160,3162],{"id":3161},"starter-packs","Starter Packs!",[15,3164,3165],{},"Here is when things become different. Both Twitter and BlueSky have lists. On Twitter, lists are hidden under the \"more\"\nicon, even though it's more important than \"Verified Orgs,\" in my opinion. But you can follow the list, not the\nfollowers, unless you do it manually (or I don't know how to follow them all).",[15,3167,3168],{},"The BlueSky team came up with a brilliant idea—starter packs. They function as a list of recommended followers for both\nnew and existing users. With one click, you can follow them all, or you can choose exactly whom to follow.",[15,3170,3171],{},"Imagine you sign up for a new social network and see a familiar face who created a curated list of developers. It's\nsuper tempting to follow them all and have a lovely feed to read. Plus, the design of the starter packs is right spot\non. It shows avatars of people you could already know. It just",[1484,3173,3174],{},"It feels like this is a special list of special people you need to follow, recommended by a trusted person.",[736,3176],{":hasBorder":776,":rounded":776,"alt":3177,"src":3178},"Comparison of BlueSky starter pack and Twitter list","\u002Fimg\u002Fblue-sky\u002Flists.png",[15,3180,3181],{},"This is how the starter pack page looks. It's not mandatory to follow everyone; it's up to you to choose who to follow.",[736,3183],{":hasBorder":776,":rounded":776,"alt":3184,"src":3185},"BlueSky starter pack page","\u002Fimg\u002Fblue-sky\u002Fstarter-pack.png",[15,3187,3188],{},"What we had on Twitter for ages? When someone wants to share a list of accounts, they just tag all of them, either in\none post or in a thread. The post will eventually go down in the timeline, and that's it (unless you bookmarked or\npinned it).",[15,3190,3191],{},"But gosh, just compare these two approaches:",[736,3193],{":hasBorder":776,":rounded":776,"alt":3194,"src":3195},"Comparison of two different approaches for handling lists of people","\u002Fimg\u002Fblue-sky\u002Fcomparison.png",[15,3197,3198],{},"There are so many sections, pages, and modals that it may end up being a book of wrong usability decisions.",[15,3200,3201],{},[1484,3202,3203],{},"While X is trying to be \"the everything app\" it becomes \"the nothing app\".",[15,3205,3206],{},"It's challenging to quickly develop a quality job board, streaming, posting, and community app while simultaneously\nlaying off a significant number of engineers.",[15,3208,3209,3210,3213],{},"Does anyone use Twitter for looking for jobs? I mean, in the jobs page. Or if I ask you, what platform would you\nrecommend to me for making a community, will Twitter be your first choice? ",[1515,3211,3212],{},"Will you at least think of it","? While it has\na\njob board and communities.",[1049,3215,3217],{"id":3216},"back-to-ui","Back to UI",[15,3219,3220],{},"My favorite game is to try to guess the meanings of icons without labels. Yes, context matters. Yes, you can get used to\nthem. But why not choose icons that suit better?",[15,3222,3223],{},"Yes, it might be hard to find a suitable icon for some menu items, but this sometimes happens because the whole menu is\na total mess.",[1758,3225,3226],{},[778,3227,3228,3231],{"v-slot:content":593},[15,3229,3230],{},"If your navigation items are complex and have difficult-to-find icons, it may be better to avoid them altogether. As\nlong as your clickable area is large enough, the links are accessible, and the text is familiar to your target audience,\nit won't be too bad.",[15,3232,3233],{},"However, if you have labels with wrong icons, I wouldn't say it makes the UI better.",[15,3235,3236],{},"Anyway, here are three pictures. The first one without labels. The second one is what I would think these icons mean.\nThe third one is hidden. Click the button to reveal the answer.",[3238,3239],"icons-guess",{},[41,3241,3243],{"id":3242},"lets-talk-about-bluesky","Let's talk about BlueSky",[15,3245,3246],{},"I wouldn't say that it's a perfect application that doesn't have any flaws. Although it is still in its early stages, I\nfind it much more enjoyable to use.",[15,3248,3249],{},"One of the reasons is that the quality of the feed is better since many tech experts (I really mean it) migrated to\nBlueSky.",[15,3251,3252],{},"But let's take a look at its UI, since even though it's better than Twitter''s', it yet has some room to improve.",[1049,3254,3256],{"id":3255},"home-page","Home page",[15,3258,3259],{},"The home page resembles Twitter very much. The key difference is that it looks pretty clean. There aren't many links,\nsubscriptions (premium, premium+, verified orgs, and so on), or other distracting elements.",[15,3261,3262,3263,3268],{},"What I want to draw your attention to is that Twitter is a mess. It's a mess of colors, icons, and information\narchitecture. Look at this\n",[19,3264,3267],{"href":3265,"rel":3266},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fvpon.me\u002Fpost\u002F3latui2zlpk2x",[23],"post, which compares the search input on two different platforms",",\nto understand what I mean.",[736,3270],{":hasBorder":776,":rounded":776,"alt":3271,"src":3272},"BlueSky home page","\u002Fimg\u002Fblue-sky\u002Fblue-sky.png",[1049,3274,500],{"id":499},[15,3276,3277,3278,3281],{},"The navigation ",[1515,3279,3280],{},"definitely"," seems way cleaner and does not contain a lot of weird things. The only thing that is\nsomewhat\ncontroversial is the feeds icon. To me, it seems like it's a hashtag. But it's not that easy to find a proper icon...\nProbably it should be something related to a list or a timeline, not sure.",[2869,3283,3286,3292],{"className":3284},[3285],"place-items-center",[778,3287,3288],{"v-slot:first":593},[736,3289],{":hasBorder":776,":rounded":776,"alt":3290,"src":3291,":centered":776},"BlueSky Navigation","\u002Fimg\u002Fblue-sky\u002Fblue-sky-navigation.png",[778,3293,3294],{"v-slot:second":593},[736,3295],{":hasBorder":776,":rounded":776,"alt":3296,"src":3297,":centered":776},"Twitter Navigation","\u002Fimg\u002Fblue-sky\u002Ficons-revealed.png",[1049,3299,3301],{"id":3300},"new-post","New post",[15,3303,3304],{},"While at first glance these two forms look similar, the devil is in the details.",[15,3306,3307],{},"Here is the Twitter form.",[736,3309],{":hasBorder":776,":rounded":776,"alt":3310,"src":3311,":centered":776},"Twitter post form","\u002Fimg\u002Fblue-sky\u002Ftwitter-new-post.png",[15,3313,3314],{},"And the BlueSky form.",[736,3316],{":hasBorder":776,":rounded":776,"alt":3317,"src":3318,":centered":776},"BlueSky post form","\u002Fimg\u002Fblue-sky\u002Fbluesky-new-post.png",[15,3320,3321],{},"In my opinion, both forms violate the general rule of element placement. A very general, typical modal with all the\nbuttons usually looks like this.",[736,3323,3326],{":hasBorder":776,":rounded":776,"alt":3324,"src":3325,":centered":776},"General modal","\u002Fimg\u002Fblue-sky\u002Fmodal.png",[778,3327,3328],{"v-slot:description":593},[15,3329,3330],{},[19,3331,3333],{"href":3332},"https:\u002F\u002Fframesxdesign.com\u002Ffigma-components\u002Fmodals","A sample modal from FramesX",[15,3335,3336,3337,3340],{},"The thing is, there is the ",[19,3338,1687],{"href":1292,"rel":3339},[23],", whhich states that:",[1192,3342,3343],{},[15,3344,3345],{},"Users spend most of their time on other sites. This means that users\nprefer your site to work the same way as all the\nother sites they already know.",[15,3347,3348],{},"So most of the time a modal has",[1461,3350,3351,3357,3363],{},[987,3352,3353,3354],{},"A title in the header at the ",[1484,3355,3356],{},"left-top corner",[987,3358,3359,3360],{},"The close icon is located in the ",[1484,3361,3362],{},"right-top corner",[987,3364,3365,3366],{},"The CTA button or several buttons are located in the ",[1484,3367,3368],{},"bottom-right corner",[15,3370,3371],{},"While for each rule there is an exception, I still believe that both Twitter and BlueSky could make the modals more\ntraditional-styled. Especially Twitter, since it has a lot of other issues (e.g. showing me a disabled location icon,\nwithout any hint why it's disabled, even on hover).",[15,3373,3374],{},"For some reason both social networks laced the close icon to the left-top corner and there is no title or the modal. The\nCTA buttons placement is also different (on BlueSky).",[15,3376,3377],{},"But it seems to me that it becomes an acceptable solution, since it looks like people use it without any complains\n(until you get to the scheduling form on Twitter 😅).",[15,3379,3380],{},"But look at how BlueSky treat their UI compared to Twitter.",[736,3382],{":hasBorder":776,":rounded":776,"alt":3317,"src":3383,":centered":776},"\u002Fimg\u002Fblue-sky\u002Fbluesky-vs-twitter.png",[15,3385,3386],{},"This is what happens when you select who can interact with your post. Let's call things by their proper names.",[15,3388,3389,3390,3393,3394,1368],{},"On the left side we can see a ",[886,3391,3392],{},"messy UI",", on the right side we can see a ",[886,3395,3396],{},"clean UI",[41,3398,3400],{"id":3399},"bonus-feature-that-i-adore-about-bluesky","Bonus feature that I adore about BlueSky",[15,3402,3403,3404,3407],{},"Instead of thinking about username, you can use your use ",[1484,3405,3406],{},"your own domain"," as a handle! Literally, it means\nthat everyone who sees the link to your profile, who sees your avatar in a feed, and in many other places, can\nunderstand that your handle is your site.",[1484,3409,3410,3411,3415],{},"Here is mine ",[19,3412,3413],{"href":3413,"rel":3414},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fvpon.me",[23],". I'm happy to connect! 🙌",[41,3417,3419],{"id":3418},"my-thoughts-about-social-networks","My thoughts about social networks",[1461,3421,3422,3425,3428],{},[987,3423,3424],{},"X becomes TikTok.",[987,3426,3427],{},"Threads works in a strange way, huge affected by algorithm. Some posts get 0 likes, some 500 likes, and both brings\nyou zero followers - what's going on here?",[987,3429,3430],{},"LinkedIn - overloaded with unnecessary things, but more or less decent to be here",{"title":593,"searchDepth":594,"depth":594,"links":3432},[3433,3434,3435,3443,3448,3449],{"id":2752,"depth":594,"text":2753},{"id":2896,"depth":594,"text":2897},{"id":3012,"depth":594,"text":3013,"children":3436},[3437,3438,3439,3440,3441,3442],{"id":3019,"depth":1146,"text":3020},{"id":3046,"depth":1146,"text":2932},{"id":3058,"depth":1146,"text":2935},{"id":3128,"depth":1146,"text":2938},{"id":3161,"depth":1146,"text":3162},{"id":3216,"depth":1146,"text":3217},{"id":3242,"depth":594,"text":3243,"children":3444},[3445,3446,3447],{"id":3255,"depth":1146,"text":3256},{"id":499,"depth":1146,"text":500},{"id":3300,"depth":1146,"text":3301},{"id":3399,"depth":594,"text":3400},{"id":3418,"depth":594,"text":3419},"2024-11-06T21:11:54+04:00","Bluesky has recently broke through 30M users and doesn't want to stop. In this article I'll compare  Bluesky and X in terms of UI\u002FUX.g\n","\u002Fimg\u002Fblue-sky\u002Fsocial.png",{},"\u002Farticles\u002Fblue-sky-vs-twitter",{"title":2722,"description":3451},{"loc":3454},"articles\u002F11.Blue-sky-vs-twitter","uIrIBQOWh5-gPc3XMxqto3rRlQaMbicuQoHpxUSd0a0",{"id":3460,"title":1787,"body":3461,"date":3757,"description":3758,"extension":617,"head":618,"imageUrl":3511,"meta":3759,"navigation":621,"ogImage":618,"path":1843,"robots":618,"schemaOrg":618,"seo":3760,"sitemap":3761,"stem":3762,"__hash__":3763},"articles\u002Farticles\u002F12.Visibility-of-system-status.md",{"type":8,"value":3462,"toc":3754},[3463,3466,3472,3475,3478,3483,3486,3489,3497,3500,3506,3509,3512,3515,3518,3522],[11,3464,1787],{"id":3465},"visibility-of-system-status",[3467,3468,3469],"key-idea",{},[15,3470,3471],{},"The design should always keep users informed about what is going on through appropriate feedback\nwithin a reasonable amount of time.",[15,3473,3474],{},"So, you have an interface, a layer between users and something.",[15,3476,3477],{},"It doesn't matter whether it's a web app, a mobile app, or a physical object. The principle applies to anything, even an\nairport, cafe, or your own house.",[15,3479,3480],{},[886,3481,3482],{},"Users should be aware of the current state of the system.",[15,3484,3485],{},"It doesn't mean that users should view your database, logs, recent connections, CPU usage, and other information that is\nnot needed at the current moment. But users should be aware of the things that matter to them.",[15,3487,3488],{},"It means that the interface should:",[1461,3490,3491,3494],{},[987,3492,3493],{},"React to user interactions, like clicking a button.",[987,3495,3496],{},"Show where users are. Example: What is the current page, order status, and subscription plan?",[15,3498,3499],{},"Again, this doesn't necessarily imply displaying everything at once.",[15,3501,3502,3505],{},[886,3503,3504],{},"One of the most common mistakes"," I see is users not knowing where they are in your app. Usually, this leads to\nnavigational issues. For example, I'm on a page, but I don't know how I got there. If I leave it, I probably won't find\nit again.",[15,3507,3508],{},"Consider this example. Due to complicated information architecture and deep nested pages, there is a mess in the X\nsettings page; you never know where you exactly are.",[736,3510],{":rounded":776,"src":3511},"\u002Fimg\u002Fvisibility-of-system-status\u002Fchange-password-on-x.png",[15,3513,3514],{},"This is similar to being lost in a large airport with few signs or unsure if you should board the plane or wait for it.",[3516,3517],"delimiter",{},[41,3519,3521],{"id":3520},"examples-of-applying-visibility-of-system-status","Examples of applying visibility of system status",[3523,3524,3525,3538,3550,3562,3574,3586,3598,3610,3622,3634,3646,3658,3670,3682,3694,3706,3718,3730,3742],"example-list",{},[3526,3527,3528,3533],"example-list-item",{},[778,3529,3530],{"v-slot:title":593},[15,3531,3532],{},"Show a notification when a file is uploaded.",[778,3534,3535],{"v-slot:description":593},[15,3536,3537],{},"This feature is especially useful in file management systems such as Dropbox, Google Drive, and others. Usually works\nwell in single-page applications. Can be displayed in various ways, for example, as a toast notification.",[3526,3539,3540,3545],{},[778,3541,3542],{"v-slot:title":593},[15,3543,3544],{},"While submitting a form, display a progress bar or a loader.",[778,3546,3547],{"v-slot:description":593},[15,3548,3549],{},"Unless you use the optimistic approach, consider showing users that their request is being fulfilled. It is not worth it\nif the request took, for example, 100 ms. In this case it will look like an instant flashing of the loader. But if the\nrequest takes noticeable amount of time, system should show users that it is doing its work.",[3526,3551,3552,3557],{},[778,3553,3554],{"v-slot:title":593},[15,3555,3556],{},"Use a loading spinner, progress bar, skeletons, or other techniques when fetching data from the server.",[778,3558,3559],{"v-slot:description":593},[15,3560,3561],{},"The opposite situation is when you fetch data from the server. In this case, depending on your specific case and layout,\nyou might use different kinds of loaders or skeletons. However, keep in mind that loaders may not always be necessary,\nespecially if the information loads quickly.",[3526,3563,3564,3569],{},[778,3565,3566],{"v-slot:title":593},[15,3567,3568],{},"When storing changes, display a \"Saving...\" indicator. This is particularly important for asynchronous saving.",[778,3570,3571],{"v-slot:description":593},[15,3572,3573],{},"This is a lovely candidate for the status visibility heuristic. Text editors and other apps widely use it for\nauto-saving. Apps like Google Docs display the document's saving state and the last update date.",[3526,3575,3576,3581],{},[778,3577,3578],{"v-slot:title":593},[15,3579,3580],{},"While a search is running, display its progress.",[778,3582,3583],{"v-slot:description":593},[15,3584,3585],{},"Sometimes a search might take a while, especially for large sets of data. For this case, an infinite loading indicator\nwill tell users that the system is working under your request.",[3526,3587,3588,3593],{},[778,3589,3590],{"v-slot:title":593},[15,3591,3592],{},"Show a loading indicator while a webpage or app screen is loading.",[778,3594,3595],{"v-slot:description":593},[15,3596,3597],{},"When a heavy application loads for the first time, it may take some time to load all necessary files and data. For\nexample, a single-page application might take a while for the first load, but then it will work fast. Or a landing page\nthat is full of heavy graphics and animation might make use of it.",[3526,3599,3600,3605],{},[778,3601,3602],{"v-slot:title":593},[15,3603,3604],{},"Notify users when data synchronization is in progress.",[778,3606,3607],{"v-slot:description":593},[15,3608,3609],{},"A typical example is cloud storage providers. If users have a file in a cloud storage, they should be confident whether\nit is fully uploaded and synced with the local copy or not. If this isn't the case, an indicator should inform users\nthat the file is currently syncing.",[3526,3611,3612,3617],{},[778,3613,3614],{"v-slot:title":593},[15,3615,3616],{},"Display an update progress bar when the system is updating.",[778,3618,3619],{"v-slot:description":593},[15,3620,3621],{},"System update may take quite a while, and showing the progress bar will be a good idea. Note that it should show the\nreal progress, noе an infinite one.",[3526,3623,3624,3629],{},[778,3625,3626],{"v-slot:title":593},[15,3627,3628],{},"Show error notifications when an operation fails.",[778,3630,3631],{"v-slot:description":593},[15,3632,3633],{},"When something goes wrong, notify users about it. Pay special attention to the language you use and always provide\nfurther instructions so that you don't leave your users at a dead end. This is related to another usability heuristic\ncalled users control and freedom.",[3526,3635,3636,3641],{},[778,3637,3638],{"v-slot:title":593},[15,3639,3640],{},"Indicate if a heavy process ran in the background.",[778,3642,3643],{"v-slot:description":593},[15,3644,3645],{},"For example, when exporting a large number of subscribers in a newsletter, you may either show a message that when the\nexport is ready, the system will email a link with the archive, or, if you do it right in this system (e.g., in OS),\nthere might be an indicator of how well the heavy process is going.",[3526,3647,3648,3653],{},[778,3649,3650],{"v-slot:title":593},[15,3651,3652],{},"Inform users when a background process is completed.",[778,3654,3655],{"v-slot:description":593},[15,3656,3657],{},"In the case when a heavy process that was running in the background has finished, you may notify users via different\nmethods (email, push notifications, or even SMS).",[3526,3659,3660,3665],{},[778,3661,3662],{"v-slot:title":593},[15,3663,3664],{},"Show download progress for files.",[778,3666,3667],{"v-slot:description":593},[15,3668,3669],{},"A good example of this is when you download a file in Chrome or other browsers. They will display the number of files\nyou're downloading and the estimated remaining time.",[3526,3671,3672,3677],{},[778,3673,3674],{"v-slot:title":593},[15,3675,3676],{},"Indicate the user's position in a queue or waitlist.",[778,3678,3679],{"v-slot:description":593},[15,3680,3681],{},"An example from real life: when I go to a bank branch and take a ticket to get into the queue, there is a number of\npeople in front of me printed on the ticket.",[3526,3683,3684,3689],{},[778,3685,3686],{"v-slot:title":593},[15,3687,3688],{},"Display battery status, whether it's charging or not.",[778,3690,3691],{"v-slot:description":593},[15,3692,3693],{},"Another useful and apparent example of system status is what's going on with your battery, whether it's charging or not.\nIf too little charge is left, you should notify users so that they don't forget to charge their devices.",[3526,3695,3696,3701],{},[778,3697,3698],{"v-slot:title":593},[15,3699,3700],{},"Show the current connection status (e.g., Wi-Fi signal, online\u002Foffline status).",[778,3702,3703],{"v-slot:description":593},[15,3704,3705],{},"As well as the battery status, showing what status the Wi-Fi connection has, as well as the Bluetooth connection, is a\ncommon thing in operating systems.",[3526,3707,3708,3713],{},[778,3709,3710],{"v-slot:title":593},[15,3711,3712],{},"Notify users about the status of a print job.",[778,3714,3715],{"v-slot:description":593},[15,3716,3717],{},"When sending a job for a printer, show its status. Has it started? Is it in progress or has it already been completed?",[3526,3719,3720,3725],{},[778,3721,3722],{"v-slot:title":593},[15,3723,3724],{},"Show the status of orders in e-commerce apps.",[778,3726,3727],{"v-slot:description":593},[15,3728,3729],{},"In e-commerce apps, users should know all the information about their orders, such as ordered items, order status,\nprice, delivery address, and so on.",[3526,3731,3732,3737],{},[778,3733,3734],{"v-slot:title":593},[15,3735,3736],{},"Show the realtime courier location on a map",[778,3738,3739],{"v-slot:description":593},[15,3740,3741],{},"This one is a super helpful for delivery apps. Knowing exactly how close the courier is helps you to plan your further\nactions—if the courier has almost arrived, then you might want to meet them. If the courier is far away, you can\ncontinue with your usual activities.",[3526,3743,3744,3749],{},[778,3745,3746],{"v-slot:title":593},[15,3747,3748],{},"Show the real-time taxi information.",[778,3750,3751],{"v-slot:description":593},[15,3752,3753],{},"Same as in delivery apps, showing such information as location, estimated arrival time, estimated costs, and so on is\nreally helpful.",{"title":593,"searchDepth":594,"depth":594,"links":3755},[3756],{"id":3520,"depth":594,"text":3521},"2025-02-01T06:38:57+04:00","A practical look at the visibility of system status heuristic: how to keep users informed with clear feedback, loaders, progress, and status indicators.\n",{},{"title":1787,"description":3758},{"loc":1843},"articles\u002F12.Visibility-of-system-status","YJGYnPgvzOZOLXz767WAZwWW_XnTcLI2VT0ijY7opSg",{"id":3765,"title":3766,"body":3767,"date":3844,"description":3845,"extension":617,"head":618,"imageUrl":3829,"meta":3846,"navigation":621,"ogImage":618,"path":3847,"robots":618,"schemaOrg":618,"seo":3848,"sitemap":3849,"stem":3850,"__hash__":3851},"articles\u002Farticles\u002F13.A-well-known-folder.md","A well-known folder",{"type":8,"value":3768,"toc":3839},[3769,3772,3775,3782,3786,3789,3797,3800,3803,3806,3810,3813,3816,3819,3823,3826,3830,3833],[11,3770,3766],{"id":3771},"a-well-known-folder",[15,3773,3774],{},"Have you ever seen the .well-known folder? I had seen it before, but I did not pay much attention to what it is.\nIt turned out to be a useful thing, especially in one case that is directly related to user experience.",[15,3776,3777,3778,1368],{},"But first, a shameless plug: I have ",[19,3779,3781],{"href":3780},"\u002Fconsulting","two slots for UI\u002FUX Advisory and unlimited slots for one-time review",[41,3783,3785],{"id":3784},"what-is-well-known","What is .well-known",[15,3787,3788],{},"It is a standardized hidden root URI (for example, site.com\u002F.well-known), defined by RFC 8615, that acts as a public \"passport\" for your domain.",[15,3790,3791,3792,1368],{},"To be precise, ",[19,3793,3796],{"href":3794,"rel":3795},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWell-known_URI",[23],"it is not a folder but a URI",[15,3798,3799],{},"It allows external systems to discover metadata about your site and use it for different purposes.",[15,3801,3802],{},"Why does it matter? It has many use cases, and some of them are directly related to UX.",[15,3804,3805],{},"One of them is the change-password URI. Technically, it is not really a file - it can be a redirect, a page, or anything else behind that URL.",[41,3807,3809],{"id":3808},"change-password","Change password",[15,3811,3812],{},"The .well-known area might contain files, but not only files. You can set up redirects as well.",[15,3814,3815],{},"If you redirect site.com\u002F.well-known\u002Fchange-password to the page where users can actually change their password (for example, site.com\u002Faccount\u002Fchange-password), password managers and browsers can take users directly there.",[15,3817,3818],{},"If a password manager, browser, or another app knows a password was leaked, it can suggest changing it.\nWhen users press the \"change password\" button, they get redirected to the exact location they need.",[41,3820,3822],{"id":3821},"securitytxt","Security.txt",[15,3824,3825],{},"Another useful case is putting Security.txt in the .well-known URI.\nIt is used to tell people how to contact you if they find a vulnerability.",[736,3827],{":hasBorder":776,":rounded":776,"alt":3828,"src":3829},"Example security.txt content","\u002Fimg\u002Fwell-known-folder\u002Fsecurity-txt-email.png",[15,3831,3832],{},"As you can see, it can include fields like how to contact you, when the file expires, and the preferred language.",[15,3834,3835],{},[19,3836,3838],{"href":3794,"rel":3837},[23],"There are dozens of defined URIs for this folder.",{"title":593,"searchDepth":594,"depth":594,"links":3840},[3841,3842,3843],{"id":3784,"depth":594,"text":3785},{"id":3808,"depth":594,"text":3809},{"id":3821,"depth":594,"text":3822},"2026-02-24T03:39:55+04:00","What the .well-known URI is, why it matters for UX, and how the change-password and security.txt endpoints help users and security researchers.\n",{},"\u002Farticles\u002Fa-well-known-folder",{"title":3766,"description":3845},{"loc":3847},"articles\u002F13.A-well-known-folder","DYQIb3XEWgM2ALw0WvVT2Fz9ZUxeK4bk_-QuCZtytaM",{"id":3853,"title":3854,"body":3855,"date":3844,"description":3978,"extension":617,"head":618,"imageUrl":3933,"meta":3979,"navigation":621,"ogImage":618,"path":3980,"robots":618,"schemaOrg":618,"seo":3981,"sitemap":3982,"stem":3983,"__hash__":3984},"articles\u002Farticles\u002F14.A-css-feature-you-should-know.md","A CSS feature you should know",{"type":8,"value":3856,"toc":3975},[3857,3860,3863,3866,3875,3900,3903,3908,3911,3915,3918,3927,3930,3943,3950,3953,3956,3964,3967],[11,3858,3854],{"id":3859},"a-css-feature-you-should-know",[15,3861,3862],{},"Live and learn.",[15,3864,3865],{},"Either CSS is developing so fast, or I'm so slow, but I feel like I knew 80% of CSS in 2015, and now I know at most 50%.",[15,3867,3868,3869,3874],{},"Today we'll talk about ",[19,3870,3873],{"href":3871,"rel":3872},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Fenv",[23],"env function in CSS",". Yeah... there are environment variables in CSS, just like in NodeJS 🤯",[1192,3876,3877],{},[15,3878,3879,3880,2783,3883,2783,3888,3893,3894,3899],{},"The ",[886,3881,3882],{},"env()",[19,3884,3887],{"href":3885,"rel":3886},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS",[23],"CSS",[19,3889,3892],{"href":3890,"rel":3891},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002FFunctions",[23],"function"," can be used to insert the value of a user-agent defined ",[19,3895,3898],{"href":3896,"rel":3897},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FEnvironment_variables\u002FUsing",[23],"environment variable"," into your CSS.",[15,3901,3902],{},"The syntax is simple:",[15,3904,3905],{},[1515,3906,3907],{},"env(\u003Cenvironment-variable>, \u003Cfallback>)",[15,3909,3910],{},"But what kind of environment variables do we have and how can we use them? Here is a good example.",[41,3912,3914],{"id":3913},"safe-area-inset","safe-area-inset-*",[15,3916,3917],{},"Here is the definition of the group of safe area variables.",[1192,3919,3920],{},[15,3921,3922,3923,3926],{},"safe-area-inset refers to a group of ",[886,3924,3925],{},"CSS environment variables"," (safe-area-inset-top, -right, -bottom, and -left) used to ensure web content is not obscured by device-specific UI elements like display notches, rounded corners, or system navigation bars.",[15,3928,3929],{},"But it's easier to show than tell.",[736,3931,3934],{":hasBorder":776,":rounded":776,"alt":3932,"src":3933},"Safe area inset example on a phone","\u002Fimg\u002Fenv-css-feature\u002Fsafe-area-phone.webp",[778,3935,3936],{"v-slot:description":593},[15,3937,3938,3939],{},"From ",[19,3940,3941],{"href":3941,"rel":3942},"https:\u002F\u002Fwebventures.rejh.nl\u002Fblog\u002F2025\u002Fsafe-area-inset-bottom-does-not-update\u002F",[23],[15,3944,3945,3946,3949],{},"So these variables basically hold paddings ",[886,3947,3948],{},"so that you can avoid such problems with your content being covered by the notch of an iPhone device",", for example.",[15,3951,3952],{},"In the case of a web browser, these variables will probably equal zero. If a variable is not defined for a specific device or application (the environment where the code is executed), you can use a fallback value instead.",[15,3954,3955],{},"Here is an example of how you can add top padding.",[736,3957,3960],{":hasBorder":776,":rounded":776,"alt":3958,"src":3959},"A CSS example of using safe area env variables","\u002Fimg\u002Fenv-css-feature\u002Fsafe-area-css-example.png",[778,3961,3962],{"v-slot:description":593},[15,3963,3958],{},[15,3965,3966],{},"And here is how it can be done with Tailwind classes.",[736,3968,3971],{":hasBorder":776,":rounded":776,"alt":3969,"src":3970},"An example of Tailwind syntax","\u002Fimg\u002Fenv-css-feature\u002Fsafe-area-tailwind-example.png",[778,3972,3973],{"v-slot:description":593},[15,3974,3969],{},{"title":593,"searchDepth":594,"depth":594,"links":3976},[3977],{"id":3913,"depth":594,"text":3914},"A quick explanation of CSS env() and safe-area-inset variables, with practical examples for plain CSS and Tailwind.\n",{},"\u002Farticles\u002Fa-css-feature-you-should-know",{"title":3854,"description":3978},{"loc":3980},"articles\u002F14.A-css-feature-you-should-know","X99ZtIbrIN6CMpkByyY9rBuNbAC-AkkoRYTzXnMplSA",{"id":3986,"title":3987,"body":3988,"date":3844,"description":4103,"extension":617,"head":618,"imageUrl":4062,"meta":4104,"navigation":621,"ogImage":618,"path":4105,"robots":618,"schemaOrg":618,"seo":4106,"sitemap":4107,"stem":4108,"__hash__":4109},"articles\u002Farticles\u002F15.CSS-combo-for-a11y-performance-and-browser-support.md","CSS Combo for a11y, performance and browser support",{"type":8,"value":3989,"toc":4101},[3990,3993,3996,3999,4006,4009,4042,4045,4059,4068,4071,4080,4090,4098],[11,3991,3987],{"id":3992},"css-combo-for-a11y-performance-and-browser-support",[15,3994,3995],{},"This CSS combo does something most developers skip.",[15,3997,3998],{},"It handles accessibility, performance, and browser support at once.",[15,4000,4001,4002,4005],{},"Take ",[886,4003,4004],{},"backdrop-filter"," as an example. Users might not want fancy liquid glass effects. Also, backdrop-filter heavily consumes GPU resources because it requires real-time processing of every frame.",[15,4007,4008],{},"What you need to know:",[1461,4010,4011,4020,4033],{},[987,4012,4013,4014,4019],{},"There is ",[886,4015,4016],{},[1609,4017,4018],{},"prefers-reduced-transparency"," media query, indicating whether users have disabled transparency effects in their OS. It has 72.57% global support, not universal, but growing.",[987,4021,4022,4026,4027,4032],{},[886,4023,4024],{},[1609,4025,4004],{}," has around 95% browser support. With ",[886,4028,4029],{},[1609,4030,4031],{},"@supports (backdrop-filter: blur(1px))"," you can check whether it is supported or not.",[987,4034,4035,4036,4041],{},"With ",[886,4037,4038],{},[1609,4039,4040],{},"@media (hover: hover) and (pointer: fine)"," you can check if we are on a desktop device.",[15,4043,4044],{},"What you can achieve:",[1461,4046,4047,4050,4053,4056],{},[987,4048,4049],{},"Have a default behavior for something, for example a header with a semi-transparent background.",[987,4051,4052],{},"If backdrop-filter is supported then you can apply it.",[987,4054,4055],{},"Apply it only for desktop devices to reduce resource consumption.",[987,4057,4058],{},"If users do not want it, you can disable it for any kind of device.",[736,4060,4063],{":hasBorder":776,":rounded":776,"alt":4061,"src":4062},"CSS combo for accessibility, performance, and browser support","\u002Fimg\u002Fcss-combo\u002Fbackdrop-combo.png",[778,4064,4065],{"v-slot:description":593},[15,4066,4067],{},"CSS combo example for accessibility, performance, and browser support",[15,4069,4070],{},"You can also flip it around if you want blur only on mobile.",[736,4072,4075],{":hasBorder":776,":rounded":776,"alt":4073,"src":4074},"Mobile-first backdrop blur example","\u002Fimg\u002Fcss-combo\u002Fmobile-blur-example.png",[778,4076,4077],{"v-slot:description":593},[15,4078,4079],{},"An example where blur is applied only on mobile",[15,4081,4082,4083,4085,4086,4089],{},"If ",[1609,4084,4040],{}," checks that it is a desktop device, then ",[1609,4087,4088],{},"(hover: none) and (pointer: coarse)"," checks that it is not a desktop device. It is not 100% accurate, but works well in practice.",[15,4091,4092,4093],{},"P.S. Need some help on UI\u002FUX side? Here is how I can help: ",[19,4094,4097],{"href":4095,"rel":4096},"https:\u002F\u002Fvpon.me\u002Fconsulting",[23],"vpon.me\u002Fconsulting",[15,4099,4100],{},"Have a nice week.",{"title":593,"searchDepth":594,"depth":594,"links":4102},[],"Practical CSS combination for balancing accessibility preferences, browser support, and performance when using backdrop-filter.\n",{},"\u002Farticles\u002Fcss-combo-for-a11y-performance-and-browser-support",{"title":3987,"description":4103},{"loc":4105},"articles\u002F15.CSS-combo-for-a11y-performance-and-browser-support","WfCy_Vb775bE2pjUQD6QhhDlqaUbTNNDr2_UBTLdU3w",{"id":4111,"title":4112,"body":4113,"date":4501,"description":4502,"extension":617,"head":618,"imageUrl":4200,"meta":4503,"navigation":621,"ogImage":618,"path":4504,"robots":618,"schemaOrg":618,"seo":4505,"sitemap":4506,"stem":4507,"__hash__":4508},"articles\u002Farticles\u002F16.What-is-oklch-and-why-you-should-use-it.md","What is OKLCH and why you should use it",{"type":8,"value":4114,"toc":4489},[4115,4118,4121,4124,4132,4170,4173,4176,4183,4186,4189,4197,4206,4209,4212,4215,4219,4232,4239,4242,4251,4254,4257,4266,4269,4272,4275,4278,4281,4290,4294,4297,4306,4315,4318,4338,4346,4373,4376,4385,4388,4407,4410,4414,4418,4421,4430,4433,4437,4445,4454,4457,4461,4484,4486],[11,4116,4112],{"id":4117},"what-is-oklch-and-why-you-should-use-it",[15,4119,4120],{},"When I first dived into the topic of colors, it seemed to me that I was at least studying nuclear physics. It still does, though.",[15,4122,4123],{},"Disclaimer:",[1461,4125,4126,4129],{},[987,4127,4128],{},"I might have some inaccuracies in this article.",[987,4130,4131],{},"Sometimes I used definitions provided by Google AI, because it was challenging for me to convey ideas with precise words. But mostly there are links and definitions from Wikipedia and other resources.",[15,4133,4134,4135,4138,4139,4138,4142,4138,4145,4138,4148,4138,4151,4138,4154,4138,4157,4138,4160,4138,4163,4138,4166,4169],{},"There are many notions and abbreviations: ",[886,4136,4137],{},"CIE 1931",", ",[886,4140,4141],{},"RGB",[886,4143,4144],{},"sRGB",[886,4146,4147],{},"HSL",[886,4149,4150],{},"CMYK",[886,4152,4153],{},"Oklab",[886,4155,4156],{},"LCH",[886,4158,4159],{},"OKLCH",[886,4161,4162],{},"P3 Colors",[886,4164,4165],{},"Adobe RGB",[886,4167,4168],{},"Rec.2020","...",[15,4171,4172],{},"A few years ago we all used good old HEX or HSL in CSS, and everything seemed perfectly fine.",[15,4174,4175],{},"Then, Bjorn Ottosson introduced the OKLCH model in December 2020.",[15,4177,4178,4179,4182],{},"In Tailwind 4, the color palette already uses OKLCH. I was curious: what the heck is ",[886,4180,4181],{},"oklch(42.4% 0.199 265.638)","?",[15,4184,4185],{},"Here I'll tell you how I understand it, based on a few resources listed at the end.",[41,4187,4137],{"id":4188},"cie-1931",[15,4190,4191,4192,1368],{},"First of all, there is the ",[19,4193,4196],{"href":4194,"rel":4195},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCIE_1931_color_space",[23],"CIE 1931 color space",[736,4198,4201],{":hasBorder":776,":rounded":776,"alt":4199,"src":4200},"CIE 1931 xy chromaticity diagram","\u002Fimg\u002Foklch\u002Fcie-1931-gamut.png",[778,4202,4203],{"v-slot:description":593},[15,4204,4205],{},"Gamut of the CIE RGB primaries and location of primaries on the CIE 1931 xy chromaticity diagram",[15,4207,4208],{},"So I assume that CIE 1931 is basically a map of all colors humans can see.",[15,4210,4211],{},"To be precise, it is not fully correct. The diagram represents colors humans can perceive in terms of hue and saturation, but not their brightness.",[15,4213,4214],{},"In any case, I think about it as a \"master map of colors\". It might be an oversimplification, but it is enough for practical usage.",[41,4216,4218],{"id":4217},"whats-the-difference-between-rgb-and-srgb","What's the difference between RGB and sRGB?",[15,4220,4221,4226,4227,4231],{},[19,4222,4225],{"href":4223,"rel":4224},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FRGB_color_model",[23],"RGB is an additive color model",", in which the red, green, and blue colors are added together. There is also a subtractive color model, ",[19,4228,4150],{"href":4229,"rel":4230},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCMYK_color_model",[23],", but that is a different story.",[15,4233,4234,4238],{},[19,4235,4144],{"href":4236,"rel":4237},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSRGB",[23]," stands for standard RGB. It is a color space standard developed by Hewlett-Packard and Microsoft in 1996 to ensure consistent color display across different devices like computer monitors and printers.",[15,4240,4241],{},"sRGB is a subset of CIE 1931, which approximately looks like this:",[736,4243,4246],{":hasBorder":776,":rounded":776,"alt":4244,"src":4245},"sRGB gamut within the CIE 1931 diagram","\u002Fimg\u002Foklch\u002Fsrgb-gamut.png",[778,4247,4248],{"v-slot:description":593},[15,4249,4250],{},"sRGB gamut plotted within the CIE 1931 chromaticity diagram",[15,4252,4253],{},"So there is a \"master gamut\" that has all colors and a subset, which is sRGB.",[15,4255,4256],{},"In the sRGB space we can describe green by using HEX, RGB, or HSL values.",[736,4258,4261],{":hasBorder":776,":rounded":776,"alt":4259,"src":4260},"Different CSS ways to define green in sRGB","\u002Fimg\u002Foklch\u002Fgreen-css-values.png",[778,4262,4263],{"v-slot:description":593},[15,4264,4265],{},"Different ways of setting the green color in the sRGB color space via CSS",[41,4267,4162],{"id":4268},"p3-colors",[15,4270,4271],{},"For many years sRGB was enough because displays could not show anything wider anyway.",[15,4273,4274],{},"The first monitors capable of reproducing a larger gamut appeared around 2008 (HP DreamColor with around 97% DCI-P3).",[15,4276,4277],{},"Apple later standardized a consumer-friendly version called Display P3 in 2015, and by 2016 P3 began spreading across laptops, phones, and desktop monitors.",[15,4279,4280],{},"Along with P3, there are other wide-gamut color spaces such as Adobe RGB and Rec.2020. They also cover a wider range of colors compared to sRGB but are used in different industries and for different hardware.",[736,4282,4285],{":hasBorder":776,":rounded":776,"alt":4283,"src":4284},"P3 gamut and other common RGB color spaces","\u002Fimg\u002Foklch\u002Fp3-vs-other-gamuts.png",[778,4286,4287],{"v-slot:description":593},[15,4288,4289],{},"The CIE 1931 chromaticity diagram showing the P3 gamut, and the gamuts of some other common RGB color spaces",[41,4291,4293],{"id":4292},"oklab-and-oklch","OKLAB and OKLCH",[15,4295,4296],{},"OKLAB is a more modern, perceptually uniform color space developed in 2020. Perceptually uniform means that colors change in a way that feels visually even and consistent for humans.",[15,4298,4299,4300,4305],{},"In CSS you can set it by using the ",[19,4301,4304],{"href":4302,"rel":4303},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Fcolor_value\u002Foklab",[23],"oklab"," function.",[736,4307,4310],{":hasBorder":776,":rounded":776,"alt":4308,"src":4309},"Example of oklab() usage in CSS","\u002Fimg\u002Foklch\u002Foklab-css-example.png",[778,4311,4312],{"v-slot:description":593},[15,4313,4314],{},"An example of oklab() usage in CSS",[15,4316,4317],{},"It takes three params:",[1461,4319,4320,4326,4332],{},[987,4321,4322,4325],{},[886,4323,4324],{},"L (Lightness)",": ranges from 0.0 (black) to 1.0 (white).",[987,4327,4328,4331],{},[886,4329,4330],{},"a (Green-Red axis)",": negative values are green, positive values are red.",[987,4333,4334,4337],{},[886,4335,4336],{},"b (Blue-Yellow axis)",": negative values are blue, positive values are yellow.",[15,4339,4340,4341,1432],{},"While OKLCH, as defined in ",[19,4342,4345],{"href":4343,"rel":4344},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Fcolor_value\u002Foklch",[23],"MDN",[1192,4347,4348],{},[15,4349,3879,4350,4353,4354,4356,4357,4360,4361,4364,4365,4368,4369,4372],{},[1609,4351,4352],{},"oklch()"," functional notation expresses a given color in the Oklab color space. ",[1609,4355,4352],{}," is the cylindrical form of ",[1609,4358,4359],{},"oklab()",", using the same ",[1609,4362,4363],{},"L"," axis, but with polar Chroma (",[1609,4366,4367],{},"C",") and Hue (",[1609,4370,4371],{},"h",") coordinates.",[15,4374,4375],{},"In summary, Oklab and Oklch are two coordinate systems describing the same perceptually uniform color space, with Oklch being the more user-friendly option.",[736,4377,4380],{":hasBorder":776,":rounded":776,"alt":4378,"src":4379},"OKLAB and OKLCH comparison","\u002Fimg\u002Foklch\u002Foklab-vs-oklch.png",[778,4381,4382],{"v-slot:description":593},[15,4383,4384],{},"OKLAB and OKLCH are two representations of the same color space",[15,4386,4387],{},"It takes three params as well:",[1461,4389,4390,4395,4401],{},[987,4391,4392,4394],{},[886,4393,4324],{},": perceived brightness of the color, from 0 to 1 (or 0% to 100%).",[987,4396,4397,4400],{},[886,4398,4399],{},"C (Chroma)",": color intensity or vividness. Practical values usually stay below 0.5.",[987,4402,4403,4406],{},[886,4404,4405],{},"H (Hue)",": the type of color, such as red, blue, or green. Ranges from 0deg to 360deg.",[15,4408,4409],{},"This is way more readable.",[41,4411,4413],{"id":4412},"but-why-do-we-need-oklch","But why do we need OKLCH?",[1049,4415,4417],{"id":4416},"wide-gamut-support-eg-p3-colors","Wide gamut support, e.g. P3 Colors",[15,4419,4420],{},"In Chrome DevTools, if you set a color using oklch, you will see extra colors available.",[736,4422,4425],{":hasBorder":776,":rounded":776,"alt":4423,"src":4424},"Chrome DevTools showing extended gamut with OKLCH","\u002Fimg\u002Foklch\u002Fchrome-devtools-oklch.png",[778,4426,4427],{"v-slot:description":593},[15,4428,4429],{},"Chrome DevTools visualization for OKLCH colors",[15,4431,4432],{},"OKLCH does not increase the gamut itself, it just helps navigate it more predictably.",[1049,4434,4436],{"id":4435},"better-than-hsl-for-accessibility","Better than HSL for accessibility",[15,4438,4439,4440,1368],{},"Look at the picture ",[19,4441,4444],{"href":4442,"rel":4443},"https:\u002F\u002Fevilmartians.com\u002Fchronicles\u002Foklch-in-css-why-quit-rgb-hsl",[23],"from this article",[736,4446,4449],{":hasBorder":776,":rounded":776,"alt":4447,"src":4448},"HSL vs OKLCH accessibility comparison","\u002Fimg\u002Foklch\u002Fhsl-vs-oklch-accessibility.png",[778,4450,4451],{"v-slot:description":593},[15,4452,4453],{},"Accessibility comparison between HSL and OKLCH when only hue changes",[15,4455,4456],{},"In both HSL and OKLCH only the hue value has been changed, which made the HSL version inaccessible while OKLCH remains accessible.",[41,4458,4460],{"id":4459},"must-read","Must read",[1461,4462,4463,4470,4476],{},[987,4464,4465],{},[19,4466,4469],{"href":4467,"rel":4468},"https:\u002F\u002Foklch.net\u002F",[23],"oklch.net",[987,4471,4472],{},[19,4473,4475],{"href":4442,"rel":4474},[23],"evilmartians.com\u002Fchronicles\u002Foklch-in-css-why-quit-rgb-hsl",[987,4477,4478,4479],{},"Converter: ",[19,4480,4483],{"href":4481,"rel":4482},"https:\u002F\u002Foklch.com\u002F",[23],"oklch.com",[41,4485,1831],{"id":1830},[15,4487,4488],{},"It's time to switch to oklch, use wider gamuts, and choose more vibrant yet accessible colors.",{"title":593,"searchDepth":594,"depth":594,"links":4490},[4491,4492,4493,4494,4495,4499,4500],{"id":4188,"depth":594,"text":4137},{"id":4217,"depth":594,"text":4218},{"id":4268,"depth":594,"text":4162},{"id":4292,"depth":594,"text":4293},{"id":4412,"depth":594,"text":4413,"children":4496},[4497,4498],{"id":4416,"depth":1146,"text":4417},{"id":4435,"depth":1146,"text":4436},{"id":4459,"depth":594,"text":4460},{"id":1830,"depth":594,"text":1831},"2026-02-25T02:03:20+04:00","A practical explanation of OKLCH: where it comes from, how it relates to CIE 1931, RGB, sRGB, P3, and why it helps with accessible color work.\n",{},"\u002Farticles\u002Fwhat-is-oklch-and-why-you-should-use-it",{"title":4112,"description":4502},{"loc":4504},"articles\u002F16.What-is-oklch-and-why-you-should-use-it","Gs2WNPqmNdlESL0R7pYeieICN5ift8Uhg99De5YGvj0",{"id":4510,"title":4511,"body":4512,"date":4501,"description":4670,"extension":617,"head":618,"imageUrl":4526,"meta":4671,"navigation":621,"ogImage":618,"path":4672,"robots":618,"schemaOrg":618,"seo":4673,"sitemap":4674,"stem":4675,"__hash__":4676},"articles\u002Farticles\u002F17.The-other-5-heuristics-make-you-a-usability-expert.md","The other 5 heuristics make you a usability expert",{"type":8,"value":4513,"toc":4663},[4514,4517,4520,4523,4532,4535,4539,4544,4547,4550,4554,4559,4562,4565,4579,4583,4588,4591,4594,4598,4603,4606,4617,4620,4631,4635,4640,4643,4646,4655],[11,4515,4511],{"id":4516},"the-other-5-heuristics-make-you-a-usability-expert",[15,4518,4519],{},"In this issue we cover the rest of the usability heuristics, and start with a fun experiment.",[15,4521,4522],{},"Take your friend's phone and shuffle the apps placement like this.",[736,4524,4527],{":hasBorder":776,":rounded":776,"alt":4525,"src":4526},"Apps order shuffled on a phone screen","\u002Fimg\u002Fusability-heuristics\u002Fapps-order.png",[778,4528,4529],{"v-slot:description":593},[15,4530,4531],{},"Shuffling app positions breaks recognition patterns and increases memory load",[15,4533,4534],{},"All icons are there. All labels are there. But you might be better off staying away from your friend for a while. That is the first heuristic.",[41,4536,4538],{"id":4537},"recognition-rather-than-recall","Recognition Rather than Recall",[1192,4540,4541],{},[15,4542,4543],{},"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 (for example field labels or menu items) should be visible or easily retrievable when needed.",[15,4545,4546],{},"We often remember things subconsciously. The most obvious example is our mobile phones. We arrange the apps we use in a specific order on specific screens.",[15,4548,4549],{},"Nobody remembers exactly where an app is, but as soon as we take our phone, we can instantly find it.",[41,4551,4553],{"id":4552},"flexibility-and-efficiency-of-use","Flexibility and Efficiency of Use",[1192,4555,4556],{},[15,4557,4558],{},"Shortcuts, hidden from novice users, may speed up interaction for expert users so the design can support both inexperienced and experienced users. Allow users to tailor frequent actions.",[15,4560,4561],{},"This heuristic tells us that it is usually a good idea to give users an option to set up how they want to work with your app.",[15,4563,4564],{},"For example:",[1461,4566,4567,4570,4573,4576],{},[987,4568,4569],{},"Letting users customize keyboard shortcuts.",[987,4571,4572],{},"Option to customize dashboard widgets.",[987,4574,4575],{},"Option to change color schemes and other settings in text editors.",[987,4577,4578],{},"Theming options (dark\u002Flight\u002Ffocus modes).",[41,4580,4582],{"id":4581},"aesthetic-and-minimal-design","Aesthetic and Minimal Design",[1192,4584,4585],{},[15,4586,4587],{},"Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.",[15,4589,4590],{},"The goal is to make sure every element on the screen has a clear purpose and does not add unnecessary complexity.",[15,4592,4593],{},"Remove unnecessary buttons, texts, or other elements that do not directly help users achieve their goals.",[41,4595,4597],{"id":4596},"help-users-recognize-diagnose-and-recover-from-errors","Help Users Recognize, Diagnose, and Recover from Errors",[1192,4599,4600],{},[15,4601,4602],{},"Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.",[15,4604,4605],{},"Not:",[1461,4607,4608,4611,4614],{},[987,4609,4610],{},"\"Error Code 502: Bad Gateway\"",[987,4612,4613],{},"\"Connection Timeout Error\"",[987,4615,4616],{},"\"Authentication failed\"",[15,4618,4619],{},"But:",[1461,4621,4622,4625,4628],{},[987,4623,4624],{},"\"We are having trouble connecting to the server. Try refreshing the page or come back later.\"",[987,4626,4627],{},"\"We could not reach the server. Please check your internet connection or try again later.\"",[987,4629,4630],{},"\"Incorrect email or password. Did you forget your password?\"",[41,4632,4634],{"id":4633},"help-and-documentation","Help and Documentation",[1192,4636,4637],{},[15,4638,4639],{},"It is best if an interface does not need additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.",[15,4641,4642],{},"We should try to make the interface self-explanatory so users do not have to read docs or send support requests.",[15,4644,4645],{},"But it is not always possible. Some systems are complex. Some involve a lot of legal information, for example in banking apps. The goal is to make documentation easy to search and show the right hints at the right place and time.",[736,4647,4650],{":hasBorder":776,":rounded":776,"alt":4648,"src":4649},"Different types of product documentation","\u002Fimg\u002Fusability-heuristics\u002Ftypes-of-documentation.svg",[778,4651,4652],{"v-slot:description":593},[15,4653,4654],{},"Types of documentation that help users complete complex tasks",[15,4656,4657,4662],{},[19,4658,4661],{"href":4659,"rel":4660},"https:\u002F\u002Fdoing-design-right.com\u002F#buy",[23],"You can learn much more in my recent course",". The Black Friday deal is already there.",{"title":593,"searchDepth":594,"depth":594,"links":4664},[4665,4666,4667,4668,4669],{"id":4537,"depth":594,"text":4538},{"id":4552,"depth":594,"text":4553},{"id":4581,"depth":594,"text":4582},{"id":4596,"depth":594,"text":4597},{"id":4633,"depth":594,"text":4634},"A practical walkthrough of five Nielsen usability heuristics with examples: recognition over recall, flexibility, minimal design, error recovery, and documentation.\n",{},"\u002Farticles\u002Fthe-other-5-heuristics-make-you-a-usability-expert",{"title":4511,"description":4670},{"loc":4672},"articles\u002F17.The-other-5-heuristics-make-you-a-usability-expert","j8ITfm1IDI7NiMnnbfPeoeaEbXmR79Udfc6b3l3Bze0",{"id":4678,"title":4679,"body":4680,"date":4501,"description":4871,"extension":617,"head":618,"imageUrl":4708,"meta":4872,"navigation":621,"ogImage":618,"path":4873,"robots":618,"schemaOrg":618,"seo":4874,"sitemap":4875,"stem":4876,"__hash__":4877},"articles\u002Farticles\u002F18.Reviewing-a-sign-up-form.md","Reviewing a sign up form",{"type":8,"value":4681,"toc":4866},[4682,4685,4692,4695,4698,4702,4705,4714,4717,4720,4726,4732,4739,4746,4752,4761,4763,4766,4775,4778,4787,4797,4803,4806,4809,4815,4818,4822,4829,4832,4838,4841,4850,4853,4856,4859],[11,4683,4679],{"id":4684},"reviewing-a-sign-up-form",[15,4686,4687,4688,4691],{},"Side note: I've changed my email to ",[1609,4689,4690],{},"hi@vpon.me"," to match my current domain.",[15,4693,4694],{},"The first newsletter of the year is a bit of a warm-up. I will walk through a sign-up form and point out typical issues that appear in old legacy interfaces.",[15,4696,4697],{},"The goal is to help you recognize these problems quickly when you are working with an existing UI.",[41,4699,4701],{"id":4700},"the-form","The form",[15,4703,4704],{},"Here is what it looks like. The question is, how many problems can you spot?",[736,4706,4709],{":hasBorder":776,":rounded":776,"alt":4707,"src":4708},"Initial sign-up form screenshot","\u002Fimg\u002Fsignup-form-review\u002Fform-overview.png",[778,4710,4711],{"v-slot:description":593},[15,4712,4713],{},"Original sign-up form layout",[15,4715,4716],{},"Let's take a closer look.",[15,4718,4719],{},"There is a \"log in\" link. Usually, you would expect it at the top or bottom of the form, maybe near the heading. Here it has the same visual style as the form heading and sits in the top-right corner. Some users will likely miss it.",[15,4721,4722,4725],{},[886,4723,4724],{},"The question mark in \"LOG IN?\" also feels odd."," A sentence like \"Already have an account?\" works fine. But when you use action words like log in, sign up, or register, adding a question mark does not make much sense.",[15,4727,4728,4731],{},[886,4729,4730],{},"The intro text is redundant."," It is a common legacy pattern: adding extra copy to make the interface feel more \"designed\". But if the form already has the \"Create An Account\" heading, this text often adds little value.",[15,4733,4734,4735,4738],{},"The password rules description should go ",[886,4736,4737],{},"below"," the field. First show the input, then show requirements and hints.",[15,4740,4741,4742,4745],{},"The password rules are ",[886,4743,4744],{},"hard to scan",". In this case, a password strength indicator might work better, or at least a short list of clear requirements.",[15,4747,4748,4751],{},[886,4749,4750],{},"Finally, the checkbox feels like a dark pattern."," The newsletter subscription is pre-selected, while terms and conditions do not have a dedicated checkbox. If someone scans quickly, this can be misleading.",[736,4753,4756],{":hasBorder":776,":rounded":776,"alt":4754,"src":4755},"Highlighted problems in the form","\u002Fimg\u002Fsignup-form-review\u002Fform-problems-highlighted.png",[778,4757,4758],{"v-slot:description":593},[15,4759,4760],{},"Examples of hierarchy and copy issues in the form",[41,4762,1594],{"id":1593},[15,4764,4765],{},"Look at these two states (focus in and out). This is a very typical issue. You have not entered any data yet and already got a validation error. Better to let users type first.",[736,4767,4770],{":hasBorder":776,":rounded":776,"alt":4768,"src":4769},"Validation errors shown too early","\u002Fimg\u002Fsignup-form-review\u002Fvalidation-focus-states.png",[778,4771,4772],{"v-slot:description":593},[15,4773,4774],{},"Validation appears before the user provides input",[15,4776,4777],{},"If you go through the form with the Tab key, here is what you will see.",[736,4779,4782],{":hasBorder":776,":rounded":776,"alt":4780,"src":4781},"Keyboard navigation and error states","\u002Fimg\u002Fsignup-form-review\u002Ftab-navigation-errors.png",[778,4783,4784],{"v-slot:description":593},[15,4785,4786],{},"Error messaging and focus states during keyboard navigation",[15,4788,4789,4792,4793,4796],{},[886,4790,4791],{},"The word \"required\" is repeated",", and there is ",[886,4794,4795],{},"no visual indicator"," like an icon. For people with color vision deficiency, it can be hard to recognize errors instantly.",[15,4798,4799,4802],{},[886,4800,4801],{},"Do not rely only on color."," Use additional indicators.",[15,4804,4805],{},"There is also a loose coupling problem: error messages are too far from their fields, so the visual connection is weak.",[15,4807,4808],{},"The message \"A valid first name is required\" includes two requirements in one sentence: the field is required and the value must be valid. But \"valid\" is ambiguous.",[15,4810,4811,4814],{},[886,4812,4813],{},"Show one error at a time."," It reduces cognitive load and gives users a clear next step.",[15,4816,4817],{},"Finally, the \"Terms of Service\" link is red, same as error color. This creates confusion. The link color should be clearly different from errors.",[41,4819,4821],{"id":4820},"tiny-details","Tiny details",[15,4823,4824,4825,4828],{},"If you look closer, ",[886,4826,4827],{},"labels and placeholders are not aligned",". It is a tiny detail, but many such details can make the UI feel sloppy.",[15,4830,4831],{},"The show\u002Fhide password icon is not SVG, so it has poor visual quality.",[15,4833,4834,4837],{},[886,4835,4836],{},"Repeating the same text"," in both label and placeholder adds little value.",[15,4839,4840],{},"The checkbox hit area is too small, because only the checkbox itself is clickable while the label is not.",[736,4842,4845],{":hasBorder":776,":rounded":776,"alt":4843,"src":4844},"Small but important UI details","\u002Fimg\u002Fsignup-form-review\u002Ftiny-details.png",[778,4846,4847],{"v-slot:description":593},[15,4848,4849],{},"Alignment, icon quality, and clickable area issues",[15,4851,4852],{},"The two-column layout is also not ideal. It may work in some cases, but often causes scanning and responsive problems. On mobile, this should usually become one column.",[15,4854,4855],{},"For one of the most important forms, there are too many fields. In many cases, email + password + social login is enough.",[15,4857,4858],{},"You can often defer email verification until the user tries to perform an important action, instead of blocking them before they even see the product.",[15,4860,4861,4862,1368],{},"If you need me to review your UI, ",[19,4863,4865],{"href":4095,"rel":4864},[23],"I provide consulting services",{"title":593,"searchDepth":594,"depth":594,"links":4867},[4868,4869,4870],{"id":4700,"depth":594,"text":4701},{"id":1593,"depth":594,"text":1594},{"id":4820,"depth":594,"text":4821},"A practical walkthrough of common usability problems in a legacy sign-up form: hierarchy, copy, validation, accessibility, and tiny UI details.\n",{},"\u002Farticles\u002Freviewing-a-sign-up-form",{"title":4679,"description":4871},{"loc":4873},"articles\u002F18.Reviewing-a-sign-up-form","COp3BRsd2m6DhYuIbWWQZvK1LC4EdiMEzzY4h1Y0vsc",{"id":4879,"title":4880,"body":4881,"date":4924,"description":4925,"extension":617,"head":618,"imageUrl":4898,"meta":4926,"navigation":621,"ogImage":618,"path":4927,"robots":618,"schemaOrg":618,"seo":4928,"sitemap":4929,"stem":4930,"__hash__":4931},"articles\u002Farticles\u002F19.Useful-css-one-liner-trick.md","Useful CSS one-liner trick",{"type":8,"value":4882,"toc":4922},[4883,4886,4895,4904,4907,4910,4919],[11,4884,4880],{"id":4885},"useful-css-one-liner-trick",[15,4887,4888,4889,4894],{},"There is the ",[19,4890,4893],{"href":4891,"rel":4892},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Ffilter-function\u002Fgrayscale",[23],"grayscale filter"," in CSS that can make your images fully grayscale.",[736,4896,4899],{":hasBorder":776,":rounded":776,"alt":4897,"src":4898},"Applying grayscale filter","\u002Fimg\u002Fuseful-css-one-liner\u002Fgrayscale-logos.png",[778,4900,4901],{"v-slot:description":593},[15,4902,4903],{},"Applying grayscale to UI elements",[15,4905,4906],{},"It is useful when you show a list of logos in grayscale by default and bring color back on hover.",[15,4908,4909],{},"Another trick is to apply grayscale to the whole page. This gives you a different perspective on your UI without color.",[736,4911,4914],{":hasBorder":776,":rounded":776,"alt":4912,"src":4913},"Whole page in grayscale","\u002Fimg\u002Fuseful-css-one-liner\u002Fgrayscale-whole-page.png",[778,4915,4916],{"v-slot:description":593},[15,4917,4918],{},"A page preview with grayscale applied globally",[15,4920,4921],{},"This helps you check what draws user attention and whether links, buttons, and interactive elements remain recognizable without color.",{"title":593,"searchDepth":594,"depth":594,"links":4923},[],"2026-01-07T10:00:00+04:00","A simple CSS trick with grayscale(): use it on images, logos, or even on the whole page to inspect visual hierarchy without color.\n",{},"\u002Farticles\u002Fuseful-css-one-liner-trick",{"title":4880,"description":4925},{"loc":4927},"articles\u002F19.Useful-css-one-liner-trick","qKdCLIn7p4Dd5hbddIgepSS-f_yM9F-lgu7KXdSb344",{"id":4933,"title":4934,"body":4935,"date":4986,"description":4987,"extension":617,"head":618,"imageUrl":4975,"meta":4988,"navigation":621,"ogImage":618,"path":4989,"robots":618,"schemaOrg":618,"seo":4990,"sitemap":4991,"stem":4992,"__hash__":4993},"articles\u002Farticles\u002F20.Great-css-ui-tip.md","Great CSS\u002FUI Tip",{"type":8,"value":4936,"toc":4984},[4937,4940,4948,4957,4960,4969,4972,4981],[11,4938,4934],{"id":4939},"great-cssui-tip",[15,4941,4942,4943,1368],{},"Just saw this tip from ",[19,4944,4947],{"href":4945,"rel":4946},"https:\u002F\u002Fx.com\u002Fpqoqubbw\u002Fstatus\u002F2011874675547091399",[23],"Dmytro",[736,4949,4952],{":hasBorder":776,":rounded":776,"alt":4950,"src":4951},"Original CSS\u002FUI tip screenshot","\u002Fimg\u002Fgreat-css-ui-tip\u002Foriginal-tip.jpg",[778,4953,4954],{"v-slot:description":593},[15,4955,4956],{},"Original idea from Dmytro's post",[15,4958,4959],{},"I really liked this. Here is what it looks like without the tweak:",[736,4961,4964],{":hasBorder":776,":rounded":776,"alt":4962,"src":4963},"Before state","\u002Fimg\u002Fgreat-css-ui-tip\u002Fbefore.png",[778,4965,4966],{"v-slot:description":593},[15,4967,4968],{},"Before applying the style tweak",[15,4970,4971],{},"And here is how it looks with it:",[736,4973,4976],{":hasBorder":776,":rounded":776,"alt":4974,"src":4975},"After state","\u002Fimg\u002Fgreat-css-ui-tip\u002Fafter.png",[778,4977,4978],{"v-slot:description":593},[15,4979,4980],{},"After applying the style tweak",[15,4982,4983],{},"Much cleaner.",{"title":593,"searchDepth":594,"depth":594,"links":4985},[],"2026-01-14T10:00:00+04:00","A small CSS\u002FUI enhancement that makes text highlights cleaner and more intentional, with before\u002Fafter comparison.\n",{},"\u002Farticles\u002Fgreat-css-ui-tip",{"title":4934,"description":4987},{"loc":4989},"articles\u002F20.Great-css-ui-tip","y1v-AQsfTs0Hada0loFTawp0PCVlGagHyr-nt7vDfkI",{"id":4995,"title":4996,"body":4997,"date":5056,"description":5057,"extension":617,"head":618,"imageUrl":5018,"meta":5058,"navigation":621,"ogImage":618,"path":5059,"robots":618,"schemaOrg":618,"seo":5060,"sitemap":5061,"stem":5062,"__hash__":5063},"articles\u002Farticles\u002F21.Good-ui-bad-ux.md","Good UI. Bad UX.",{"type":8,"value":4998,"toc":5052},[4999,5002,5005,5008,5012,5015,5024,5027,5030,5034,5037,5046,5049],[11,5000,4996],{"id":5001},"good-ui-bad-ux",[15,5003,5004],{},"Many readers asked for bad UX examples and why they fail. Here are two related cases I run into often.",[15,5006,5007],{},"Context: I use a separate card for subscriptions with a small balance. When a useful subscription fails due to insufficient funds, I top up and try to pay again.",[41,5009,5011],{"id":5010},"case-1","Case #1",[15,5013,5014],{},"I open this payment screen:",[736,5016,5019],{":hasBorder":776,":rounded":776,"alt":5017,"src":5018},"Payment methods list with duplicates","\u002Fimg\u002Fgood-ui-bad-ux\u002Fcase-1.png",[778,5020,5021],{"v-slot:description":593},[15,5022,5023],{},"Three visually identical cards where the first method is disabled",[15,5025,5026],{},"The same card can appear multiple times. The first method is disabled, so I cannot retry it directly. I have to add the same card again to pay successfully.",[15,5028,5029],{},"In short: there is no clear \"pay now\" retry path for the failed method, so the UI pushes users toward duplicate methods.",[41,5031,5033],{"id":5032},"case-2","Case #2",[15,5035,5036],{},"Another payment interface has the opposite issue:",[736,5038,5041],{":hasBorder":776,":rounded":776,"alt":5039,"src":5040},"Payment UI where add method is hidden","\u002Fimg\u002Fgood-ui-bad-ux\u002Fcase-2.png",[778,5042,5043],{"v-slot:description":593},[15,5044,5045],{},"Existing method is selectable, but adding a new one is hard to discover",[15,5047,5048],{},"Here I can use an existing method, but adding a new one is hard to find. The action seems hidden under a menu that visually belongs to the current method.",[15,5050,5051],{},"So in the first case I could not reuse the same method, and in the second case I could not easily add a new one.",{"title":593,"searchDepth":594,"depth":594,"links":5053},[5054,5055],{"id":5010,"depth":594,"text":5011},{"id":5032,"depth":594,"text":5033},"2026-01-21T10:00:00+04:00","Two real payment UX cases: one blocks retrying an existing method, another hides adding a new method. Good visuals, poor interaction flow.\n",{},"\u002Farticles\u002Fgood-ui-bad-ux",{"title":4996,"description":5057},{"loc":5059},"articles\u002F21.Good-ui-bad-ux","FnHdLu2o-N-16sch0_Lg5_jbFYk27llxMz52XJG4A3s",{"id":5065,"title":5066,"body":5067,"date":5110,"description":5111,"extension":617,"head":618,"imageUrl":5083,"meta":5112,"navigation":621,"ogImage":618,"path":5113,"robots":618,"schemaOrg":618,"seo":5114,"sitemap":5115,"stem":5116,"__hash__":5117},"articles\u002Farticles\u002F22.Nice-trick-for-alerts.md","Nice trick for alerts",{"type":8,"value":5068,"toc":5108},[5069,5072,5080,5089,5096,5105],[11,5070,5066],{"id":5071},"nice-trick-for-alerts",[15,5073,5074,5075,1368],{},"Found this in ",[19,5076,5079],{"href":5077,"rel":5078},"https:\u002F\u002Fx.com\u002Fpqoqubbw\u002Fstatus\u002F1988028842515063148",[23],"Dmytro's tweet",[736,5081,5084],{":hasBorder":776,":rounded":776,"alt":5082,"src":5083},"Alert highlighting idea","\u002Fimg\u002Fnice-trick-alerts\u002Fhighlight-idea.png",[778,5085,5086],{"v-slot:description":593},[15,5087,5088],{},"Different text highlight colors for different alert types",[15,5090,5091,5092,5095],{},"The idea is to use different text selection styling depending on alert color. The core mechanism is the ",[1609,5093,5094],{},"::selection"," pseudo-element.",[736,5097,5100],{":hasBorder":776,":rounded":776,"alt":5098,"src":5099},"Code example with ::selection","\u002Fimg\u002Fnice-trick-alerts\u002Fselection-code.png",[778,5101,5102],{"v-slot:description":593},[15,5103,5104],{},"Example implementation using the ::selection pseudo-element",[15,5106,5107],{},"It looks good, but still needs WCAG contrast checks.",{"title":593,"searchDepth":594,"depth":594,"links":5109},[],"2026-01-28T10:00:00+04:00","A neat alert text selection trick using ::selection, with caution to validate contrast for accessibility.\n",{},"\u002Farticles\u002Fnice-trick-for-alerts",{"title":5066,"description":5111},{"loc":5113},"articles\u002F22.Nice-trick-for-alerts","QlOi8rZBkjNyMOtWH-qUhK15apK8yXUJNxl6kmdTZRs",{"id":5119,"title":5120,"body":5121,"date":5217,"description":5218,"extension":617,"head":618,"imageUrl":5194,"meta":5219,"navigation":621,"ogImage":618,"path":5220,"robots":618,"schemaOrg":618,"seo":5221,"sitemap":5222,"stem":5223,"__hash__":5224},"articles\u002Farticles\u002F23.The-secret-focus-in-css.md","The Secret Focus in CSS",{"type":8,"value":5122,"toc":5215},[5123,5126,5136,5139,5151,5156,5162,5174,5186,5191,5202,5212],[11,5124,5120],{"id":5125},"the-secret-focus-in-css",[15,5127,5128,5129,5132,5133,1368],{},"Not that kind of focus. This is about the difference between ",[1609,5130,5131],{},":focus"," and ",[1609,5134,5135],{},":focus-visible",[15,5137,5138],{},"Most controls react similarly when clicked or tabbed to, but there is an important difference:",[1461,5140,5141,5146],{},[987,5142,5143,5145],{},[1609,5144,5131],{}," applies whenever an element receives focus (mouse or keyboard).",[987,5147,5148,5150],{},[1609,5149,5135],{}," appears when focus indication is needed, typically during keyboard navigation.",[15,5152,4035,5153,5155],{},[1609,5154,5131],{},", users can see a ring even after mouse click.",[15,5157,5158,5159,5161],{},"Here is how ",[1609,5160,5131],{}," behaves:",[736,5163,5166],{":hasBorder":776,":rounded":776,"alt":5164,"src":5165},"Focus example 1","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-example-1.png",[778,5167,5168],{"v-slot:description":593},[15,5169,5170,5171],{},"Focus state using ",[5172,5173],"focus",{},[736,5175,5178],{":hasBorder":776,":rounded":776,"alt":5176,"src":5177},"Focus example 2","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-example-2.png",[778,5179,5180],{"v-slot:description":593},[15,5181,5182,5183,5185],{},"Another ",[5172,5184],{}," behavior example",[15,5187,5188,5189,1432],{},"Now with ",[1609,5190,5135],{},[736,5192,5195],{":hasBorder":776,":rounded":776,"alt":5193,"src":5194},"Focus-visible example 1","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-visible-1.png",[778,5196,5197],{"v-slot:description":593},[15,5198,5170,5199],{},[5200,5201],"focus-visible",{},[736,5203,5206],{":hasBorder":776,":rounded":776,"alt":5204,"src":5205},"Focus-visible example 2","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-visible-2.png",[778,5207,5208],{"v-slot:description":593},[15,5209,5182,5210,5185],{},[5200,5211],{},[15,5213,5214],{},"Small details like this are noticeable in real usage and improve perceived quality.",{"title":593,"searchDepth":594,"depth":594,"links":5216},[],"2026-02-04T10:00:00+04:00","Why :focus-visible is often better than :focus for interaction polish and accessibility, with visual comparisons.\n",{},"\u002Farticles\u002Fthe-secret-focus-in-css",{"title":5120,"description":5218},{"loc":5220},"articles\u002F23.The-secret-focus-in-css","R-sm16j0U2GKlkf9SDzB-3QRiWPtN3gzlpVAet5lF-A",{"id":5226,"title":5227,"body":5228,"date":5270,"description":5271,"extension":617,"head":618,"imageUrl":5239,"meta":5272,"navigation":621,"ogImage":618,"path":5273,"robots":618,"schemaOrg":618,"seo":5274,"sitemap":5275,"stem":5276,"__hash__":5277},"articles\u002Farticles\u002F24.UI-ux-review-of-a-bank-app.md","UI\u002FUX Review of a bank app",{"type":8,"value":5229,"toc":5268},[5230,5233,5236,5245,5248,5265],[11,5231,5227],{"id":5232},"uiux-review-of-a-bank-app",[15,5234,5235],{},"I collected multiple topics recently and decided to share a quick bank app review.",[736,5237,5240],{":hasBorder":776,":rounded":776,"alt":5238,"src":5239},"Bank app card details screen","\u002Fimg\u002Fbank-app-review\u002Fbank-app.png",[778,5241,5242],{"v-slot:description":593},[15,5243,5244],{},"Bank app screen used for quick UX review",[15,5246,5247],{},"There are several issues:",[1461,5249,5250,5253,5256,5259,5262],{},[987,5251,5252],{},"Card credentials are separated from each other, while users often need number, CCV, and expiration together.",[987,5254,5255],{},"\"History\" vs \"Online transactions\" is not obvious. In this case, one means completed operations and the other means pending.",[987,5257,5258],{},"Spacing between labels and values is inconsistent.",[987,5260,5261],{},"Two balances are shown, which is confusing for many users.",[987,5263,5264],{},"Card-related info takes most of the screen while day-to-day tasks often revolve around transactions.",[15,5266,5267],{},"For critical forms and core flows, clarity should win over density.",{"title":593,"searchDepth":594,"depth":594,"links":5269},[],"2026-02-11T10:00:00+04:00","A quick UI\u002FUX teardown of a banking screen: grouping issues, unclear labels, spacing inconsistency, and overloaded card-focused layout.\n",{},"\u002Farticles\u002Fui-ux-review-of-a-bank-app",{"title":5227,"description":5271},{"loc":5273},"articles\u002F24.UI-ux-review-of-a-bank-app","C-STpitzt0Nk3p5EPI2pMr5b7kckB5xecLTpnUVQB4Y",{"id":5279,"title":5280,"body":5281,"date":5363,"description":5364,"extension":617,"head":618,"imageUrl":5307,"meta":5365,"navigation":621,"ogImage":618,"path":5366,"robots":618,"schemaOrg":618,"seo":5367,"sitemap":5368,"stem":5369,"__hash__":5370},"articles\u002Farticles\u002F25.Genius-trick.md","Genius trick",{"type":8,"value":5282,"toc":5355},[5283,5286,5293,5296,5300,5304,5313,5317,5326,5330,5339,5343,5352],[11,5284,5280],{"id":5285},"genius-trick",[15,5287,5288,5289,5292],{},"I noticed this pattern on ",[1609,5290,5291],{},"nuxt.com",", then saw similar behavior on other sites.",[15,5294,5295],{},"Sometimes I right-click a header logo to copy or save it. On these sites, right-click on the logo opens useful options instead of the default interaction.",[41,5297,5299],{"id":5298},"examples","Examples",[1049,5301,5303],{"id":5302},"nuxt","Nuxt",[736,5305,5308],{":hasBorder":776,":rounded":776,"alt":5306,"src":5307},"Nuxt logo interaction","\u002Fimg\u002Fgenius-trick\u002Fnuxt-example.png",[778,5309,5310],{"v-slot:description":593},[15,5311,5312],{},"Logo area with custom right-click behavior",[1049,5314,5316],{"id":5315},"linear","Linear",[736,5318,5321],{":hasBorder":776,":rounded":776,"alt":5319,"src":5320},"Linear logo interaction","\u002Fimg\u002Fgenius-trick\u002Flinear-example.png",[778,5322,5323],{"v-slot:description":593},[15,5324,5325],{},"Another site using the same pattern in the logo area",[1049,5327,5329],{"id":5328},"evidence","Evidence",[736,5331,5334],{":hasBorder":776,":rounded":776,"alt":5332,"src":5333},"Evidence logo interaction","\u002Fimg\u002Fgenius-trick\u002Fevidence-example.png",[778,5335,5336],{"v-slot:description":593},[15,5337,5338],{},"Context action around the brand\u002Flogo area",[1049,5340,5342],{"id":5341},"svgl","SVGL",[736,5344,5347],{":hasBorder":776,":rounded":776,"alt":5345,"src":5346},"SVGL logo interaction","\u002Fimg\u002Fgenius-trick\u002Fsvgl-example.png",[778,5348,5349],{"v-slot:description":593},[15,5350,5351],{},"Logo interaction with additional useful options",[15,5353,5354],{},"The key idea: if you intercept right-click, give users something better than the default menu.",{"title":593,"searchDepth":594,"depth":594,"links":5356},[5357],{"id":5298,"depth":594,"text":5299,"children":5358},[5359,5360,5361,5362],{"id":5302,"depth":1146,"text":5303},{"id":5315,"depth":1146,"text":5316},{"id":5328,"depth":1146,"text":5329},{"id":5341,"depth":1146,"text":5342},"2026-02-18T10:00:00+04:00","A smart right-click interaction pattern for brand logos: instead of blocking users, provide useful brand actions and assets.\n",{},"\u002Farticles\u002Fgenius-trick",{"title":5280,"description":5364},{"loc":5366},"articles\u002F25.Genius-trick","9gElOVG5xkTYAv4DBDNSThwPXKC4zRbfUqLtNZuHh3w",{"id":5372,"title":5373,"body":5374,"date":5416,"description":5417,"extension":617,"head":618,"imageUrl":5397,"meta":5418,"navigation":621,"ogImage":618,"path":5419,"robots":618,"schemaOrg":618,"seo":5420,"sitemap":5421,"stem":5422,"__hash__":5423},"articles\u002Farticles\u002F26.The-worst-layout-for-product-page.md","The worst layout for product page",{"type":8,"value":5375,"toc":5414},[5376,5379,5382,5385,5394,5403,5406],[11,5377,5373],{"id":5378},"the-worst-layout-for-product-page",[15,5380,5381],{},"Based on Baymard's research, product pages should generally avoid horizontal tabs for key information blocks.",[15,5383,5384],{},"According to their findings, users miss important tabbed content much more often than vertically collapsed sections.",[736,5386,5389],{":hasBorder":776,":rounded":776,"alt":5387,"src":5388},"Product page with vertical sections","\u002Fimg\u002Fworst-layout-product-page\u002Fvertical-sections.png",[778,5390,5391],{"v-slot:description":593},[15,5392,5393],{},"Vertically collapsed sections pattern",[736,5395,5398],{":hasBorder":776,":rounded":776,"alt":5396,"src":5397},"Product page with horizontal tabs","\u002Fimg\u002Fworst-layout-product-page\u002Fhorizontal-tabs.png",[778,5399,5400],{"v-slot:description":593},[15,5401,5402],{},"Horizontal tabs on product page",[15,5404,5405],{},"Tabs are usually a better fit for homogeneous data views (for example status-based lists), not for splitting core product details.",[15,5407,5408,5409],{},"Reference: ",[19,5410,5413],{"href":5411,"rel":5412},"https:\u002F\u002Fbaymard.com\u002Fblog\u002Fcurrent-state-ecommerce-product-page-ux",[23],"Product Page UX 2025 by Baymard",{"title":593,"searchDepth":594,"depth":594,"links":5415},[],"2026-02-25T10:00:00+04:00","Why horizontal tabs are often a bad fit for product pages, and why vertically collapsed sections are easier to discover.\n",{},"\u002Farticles\u002Fthe-worst-layout-for-product-page",{"title":5373,"description":5417},{"loc":5419},"articles\u002F26.The-worst-layout-for-product-page","wdF6jkbzjg94i5khv4o2sMlDYEY-tO0bGpp_9Y-z_us",{"id":5425,"title":5426,"body":5427,"date":5469,"description":5470,"extension":617,"head":618,"imageUrl":5444,"meta":5471,"navigation":621,"ogImage":618,"path":5472,"robots":618,"schemaOrg":618,"seo":5473,"sitemap":5474,"stem":5475,"__hash__":5476},"articles\u002Farticles\u002F27.The-false-bottom-effect.md","The false bottom effect",{"type":8,"value":5428,"toc":5467},[5429,5432,5435,5438,5441,5450,5459],[11,5430,5426],{"id":5431},"the-false-bottom-effect",[15,5433,5434],{},"There is a known UX issue called the false bottom effect.",[15,5436,5437],{},"It happens when a dropdown's visible height exactly matches the visible items, so users assume there is nothing more below.",[15,5439,5440],{},"On macOS this becomes worse because scrollbars may stay hidden until hover.",[736,5442,5445],{":hasBorder":776,":rounded":776,"alt":5443,"src":5444},"False bottom bad example","\u002Fimg\u002Ffalse-bottom-effect\u002Ffalse-bottom-bad.png",[778,5446,5447],{"v-slot:description":593},[15,5448,5449],{},"No visible clue that dropdown has more items",[736,5451,5454],{":hasBorder":776,":rounded":776,"alt":5452,"src":5453},"False bottom improved example","\u002Fimg\u002Ffalse-bottom-effect\u002Ffalse-bottom-good.png",[778,5455,5456],{"v-slot:description":593},[15,5457,5458],{},"A partially visible next item hints that content continues",[15,5460,5461,5462],{},"Source: ",[19,5463,5466],{"href":5464,"rel":5465},"https:\u002F\u002Fcxl.com\u002Fblog\u002Ffalse-bottom\u002F",[23],"CXL article on false bottom effect",{"title":593,"searchDepth":594,"depth":594,"links":5468},[],"2026-03-04T10:00:00+04:00","A subtle dropdown usability issue: when visible items perfectly fill container height, users may miss that the list is scrollable.\n",{},"\u002Farticles\u002Fthe-false-bottom-effect",{"title":5426,"description":5470},{"loc":5472},"articles\u002F27.The-false-bottom-effect","Ol94Zpn-L_p6_2SFd40seL7aR7QPzFoxNmcoQxm-DhY",{"id":5478,"title":5479,"body":5480,"date":5632,"description":5633,"extension":617,"head":618,"imageUrl":5506,"meta":5634,"navigation":621,"ogImage":618,"path":5635,"robots":618,"schemaOrg":618,"seo":5636,"sitemap":5637,"stem":5638,"__hash__":5639},"articles\u002Farticles\u002F28.Here-are-3-quick-ux-gems-for-you.md","Here are 3 quick UX gems for you",{"type":8,"value":5481,"toc":5626},[5482,5485,5488,5492,5503,5512,5516,5519,5527,5540,5549,5558,5567,5576,5583,5590,5596,5605,5614,5623],[11,5483,5479],{"id":5484},"here-are-3-quick-ux-gems-for-you",[15,5486,5487],{},"I reviewed many short notes and picked three practical solutions that noticeably improve interfaces.",[41,5489,5491],{"id":5490},"_1-verifying-email-typos","1. Verifying email typos",[15,5493,5494,5495,5498,5499,5502],{},"A great pattern is to detect likely domain typos (for example ",[1609,5496,5497],{},"gmaail"," vs ",[1609,5500,5501],{},"gmail",") and suggest correction.",[736,5504,5507],{":hasBorder":776,":rounded":776,"alt":5505,"src":5506},"Email typo verification suggestion","\u002Fimg\u002Fux-gems\u002Femail-verification.png",[778,5508,5509],{"v-slot:description":593},[15,5510,5511],{},"Helpful email-domain correction prompt",[41,5513,5515],{"id":5514},"_2-switches-vs-segmented-buttons","2. Switches vs segmented buttons",[15,5517,5518],{},"Use switches when:",[1461,5520,5521,5524],{},[987,5522,5523],{},"The option is binary.",[987,5525,5526],{},"The action applies immediately.",[15,5528,5529,5530,4138,5533,4138,5536,5539],{},"For alternatives like ",[1609,5531,5532],{},"List\u002FMap",[1609,5534,5535],{},"Cash\u002FCard",[1609,5537,5538],{},"Delivery\u002FPickup",", segmented controls are often better.",[736,5541,5544],{":hasBorder":776,":rounded":776,"alt":5542,"src":5543},"Segmented controls guidance","\u002Fimg\u002Fux-gems\u002Fsegmented-controls-quote.png",[778,5545,5546],{"v-slot:description":593},[15,5547,5548],{},"Quick rule for choosing between switch and segmented control",[736,5550,5553],{":hasBorder":776,":rounded":776,"alt":5551,"src":5552},"Switch example 1","\u002Fimg\u002Fux-gems\u002Fswitch-example-1.png",[778,5554,5555],{"v-slot:description":593},[15,5556,5557],{},"Switch usage example",[736,5559,5562],{":hasBorder":776,":rounded":776,"alt":5560,"src":5561},"Switch example 2","\u002Fimg\u002Fux-gems\u002Fswitch-example-2.png",[778,5563,5564],{"v-slot:description":593},[15,5565,5566],{},"Another switch usage example",[736,5568,5571],{":hasBorder":776,":rounded":776,"alt":5569,"src":5570},"Switch example 3","\u002Fimg\u002Fux-gems\u002Fswitch-example-3.png",[778,5572,5573],{"v-slot:description":593},[15,5574,5575],{},"Third switch usage example",[15,5577,5408,5578],{},[19,5579,5582],{"href":5580,"rel":5581},"https:\u002F\u002Fdesignsystems.surf\u002Fblueprints\u002Fsegmented-control",[23],"Segmented controls overview",[41,5584,5586,5587],{"id":5585},"_3-watch-flex-shrink","3. Watch ",[1609,5588,5589],{},"flex-shrink",[15,5591,5592,5593,5595],{},"A common bug: buttons\u002Ficons collapse when content grows and ",[1609,5594,5589],{}," is not constrained.",[736,5597,5600],{":hasBorder":776,":rounded":776,"alt":5598,"src":5599},"Flex shrink issue in a job board UI","\u002Fimg\u002Fux-gems\u002Fflex-shrink-yc.png",[778,5601,5602],{"v-slot:description":593},[15,5603,5604],{},"Button compresses because of flex behavior",[736,5606,5609],{":hasBorder":776,":rounded":776,"alt":5607,"src":5608},"Multiple flex shrink issue examples","\u002Fimg\u002Fux-gems\u002Fflex-shrink-examples.png",[778,5610,5611],{"v-slot:description":593},[15,5612,5613],{},"Real-world examples of squeezed controls",[736,5615,5618],{":hasBorder":776,":rounded":776,"alt":5616,"src":5617},"Phone UI flex shrink issue","\u002Fimg\u002Fux-gems\u002Fflex-shrink-phone.png",[778,5619,5620],{"v-slot:description":593},[15,5621,5622],{},"Mobile example of shrinking UI element",[15,5624,5625],{},"Always test with long content and edge cases.",{"title":593,"searchDepth":594,"depth":594,"links":5627},[5628,5629,5630],{"id":5490,"depth":594,"text":5491},{"id":5514,"depth":594,"text":5515},{"id":5585,"depth":594,"text":5631},"3. Watch flex-shrink","2026-03-11T10:00:00+04:00","Three practical UI\u002FUX wins: smart email typo handling, choosing switches vs segmented controls, and preventing flex-shrink layout bugs.\n",{},"\u002Farticles\u002Fhere-are-3-quick-ux-gems-for-you",{"title":5479,"description":5633},{"loc":5635},"articles\u002F28.Here-are-3-quick-ux-gems-for-you","ZlZr9F3L5pGcE0peybdchAChoo9TX4t8sBIkAeZEhik",{"id":5641,"title":5642,"body":5643,"date":5945,"description":5946,"extension":617,"head":618,"imageUrl":5947,"meta":5948,"navigation":621,"ogImage":618,"path":5949,"robots":618,"schemaOrg":618,"seo":5950,"sitemap":5951,"stem":5952,"__hash__":5953},"articles\u002Farticles\u002F29.A-UX-Review-of-an-Armenian-Medical-Aggregator.md","A UI\u002FUX Review of an Armenian Medical Aggregator",{"type":8,"value":5644,"toc":5935},[5645,5648,5660,5663,5667,5670,5679,5682,5685,5688,5691,5694,5703,5706,5709,5712,5715,5718,5727,5730,5741,5744,5748,5751,5760,5769,5772,5775,5778,5786,5789,5792,5795,5799,5802,5811,5814,5821,5824,5827,5831,5834,5837,5840,5843,5852,5855,5858,5861,5865,5868,5871,5882,5885,5889,5892,5901,5905,5912,5920,5927],[11,5646,5642],{"id":5647},"a-uiux-review-of-an-armenian-medical-aggregator",[15,5649,5650,5651,5659],{},"In this article, we will do a UI\u002FUX review\nof ",[19,5652,5658],{"href":5653,"target":5654,"rel":5655},"https:\u002F\u002Fdoctors.am\u002F","_blank",[23,5656,5657],"noopener","noreferrer","doctors.am",", an Armenian medical\naggregator.",[15,5661,5662],{},"I love checking Armenian websites because Armenia is where I live, and I constantly find interesting examples to review.\nMany of these sites are good material for showing real UI\u002FUX flaws.",[41,5664,5666],{"id":5665},"the-home-page","The home page",[15,5668,5669],{},"Here is what it looks like in the English version. I will not pay close attention to the copy because it may have been\ntranslated incorrectly. Instead, it gives us a general idea of what the site is and how it is structured.",[736,5671,5674],{":hasBorder":776,":rounded":776,":zoomable":776,"alt":5672,"src":5673},"Doctors.am homepage in the English version","\u002Fimg\u002Fdoctors-am\u002Fhomepage.png",[778,5675,5676],{"v-slot:description":593},[15,5677,5678],{},"The doctors.am homepage in the English version",[15,5680,5681],{},"First of all, I would not say this is a typical hero section pattern.",[15,5683,5684],{},"On the one hand, it is not a typical SaaS application where you have a few lines of text with a CTA button. However, it\nis not a pure news site without any functionality either.",[15,5686,5687],{},"It has at least a database of doctors, diseases, symptoms, medications, consultations, and authentication. Since it is a\nmedical aggregator, I assume the main idea is that users can find a doctor, read reviews, and continue from there.",[15,5689,5690],{},"Diseases, medications, and symptoms are probably secondary. Anyway, it is not visible right away, but there are actually\nfour search inputs. Three of them are hidden.",[15,5692,5693],{},"Take a look at what happens when you hover over these three blocks.",[5695,5696,5698],"v-video",{":hasBorder":776,":rounded":776,"src":5697},"https:\u002F\u002Fqxann4pn85b4ge43.public.blob.vercel-storage.com\u002Fdoctors-am.mp4",[778,5699,5700],{"v-slot:description":593},[15,5701,5702],{},"Search inputs are revealed only when the user hovers over specific blocks",[15,5704,5705],{},"It turns out that these search inputs are hidden until you hover over the corresponding section.",[15,5707,5708],{},"So we have two problems at once: hidden inputs and layout shifts on hover.",[15,5710,5711],{},"That is a risky combination for a core interaction. If search is important, users should not have to discover it\naccidentally.",[15,5713,5714],{},"If my assumption is correct and the core feature is searching for medical information, the hero section could be\nsimplified by having exactly one search input.",[15,5716,5717],{},"Beneath the input, there could be links to the catalogues of doctors, medications, diseases, and so on.",[736,5719,5722],{":hasBorder":776,":rounded":776,":zoomable":776,"alt":5720,"src":5721},"Simplified medical website hero with one universal search input","\u002Fimg\u002Fdoctors-am\u002Fnew-hero.png",[778,5723,5724],{"v-slot:description":593},[15,5725,5726],{},"A simplified hero concept with one universal search input and catalogue links",[15,5728,5729],{},"The idea is to:",[1461,5731,5732,5735,5738],{},[987,5733,5734],{},"Show the search right away.",[987,5736,5737],{},"Use one input with live search that works for every type of entity.",[987,5739,5740],{},"Keep links to each catalogue as quick actions, similar to the \"full list\" links in the original design.",[15,5742,5743],{},"Another possible layout would be a two-column layout that shows both the single search input and, for example, the\nlatest news.",[41,5745,5747],{"id":5746},"menu","Menu",[15,5749,5750],{},"In the menu, only two items have submenus: Diseases and News.",[736,5752,5755],{":hasBorder":776,":rounded":776,":zoomable":776,"alt":5753,"src":5754},"Diseases menu item with a submenu containing Diseases and Symptoms","\u002Fimg\u002Fdoctors-am\u002Fmenu-diseases.png",[778,5756,5757],{"v-slot:description":593},[15,5758,5759],{},"The Diseases menu item opens a submenu with Diseases and Symptoms",[736,5761,5764],{":hasBorder":776,":rounded":776,":zoomable":776,"alt":5762,"src":5763},"News menu item with a submenu containing News and Interviews","\u002Fimg\u002Fdoctors-am\u002Fmenu-news.png",[778,5765,5766],{"v-slot:description":593},[15,5767,5768],{},"The News menu item opens a submenu with News and Interviews",[15,5770,5771],{},"First, users may not realize that these menu items contain sub-items. A dropdown icon would help because it works as an\nindicator.",[15,5773,5774],{},"Second, the labels themselves suggest that something is wrong with the IA (information architecture). The Diseases menu\nhas two sub-items: Diseases (again) and Symptoms. The News menu has News and Interviews.",[15,5776,5777],{},"Two problems here:",[1461,5779,5780,5783],{},[987,5781,5782],{},"Duplicate labels.",[987,5784,5785],{},"Only two links inside each submenu.",[15,5787,5788],{},"At the same time, the logo takes quite a lot of space. There are many ways to structure the header so all these links\nare shown right away, without dropdown menus.",[15,5790,5791],{},"We literally need to add Symptoms and Interviews to the menu. Nine links in total. Not that much.",[15,5793,5794],{},"I bet if we dig deeper, we will find that News, Blog, and Interviews could be merged. Or at least Blog and News, since\nit is strange to have two separate content sections. We could use filters after all, depending on what kind of content\nusers want to read.",[41,5796,5798],{"id":5797},"registration-form","Registration form",[15,5800,5801],{},"Here we have plenty of things to discuss.",[736,5803,5806],{":hasBorder":776,":rounded":776,":zoomable":776,"alt":5804,"src":5805},"Doctor registration form with required fields and an empty right-side panel","\u002Fimg\u002Fdoctors-am\u002Fdoctor-registration.png",[778,5807,5808],{"v-slot:description":593},[15,5809,5810],{},"The doctor registration form",[15,5812,5813],{},"First, I am not sure why the form needs the right-side area with a different shade of gray. It looks like an empty panel\nand could be removed or simply made white.",[15,5815,5816,5817,5820],{},"Then, if all fields are required, there is no need to put asterisks next to every label. I have already written\nabout ",[19,5818,5819],{"href":1326},"whether required fields should be marked",", but in this case the\nasterisks definitely clutter the UI.",[15,5822,5823],{},"There are also many places across the site where the text has very poor contrast. For example, the \"Example +374 95\n123456\" placeholder is barely visible.",[15,5825,5826],{},"By the way, if the product expects a specific phone number format, it could use an input mask. If the format is strict\nand they accept only Armenian phone numbers starting with +374, a mask would be completely fine.",[1049,5828,5830],{"id":5829},"one-column-layout-is-it-good-or-not","One-column layout: is it good or not?",[15,5832,5833],{},"I also wanted to talk about the fact that the form uses a one-column layout. If you google form design best practices,\nyou will often find the same advice: use one column rather than two or more. The eye path goes from top to bottom\nthrough each input until we reach the submit button.",[15,5835,5836],{},"With two columns, the eye path can start moving in a Z-pattern, which is usually worse.",[15,5838,5839],{},"But it is totally fine to group a few inputs together if they are closely related. For example, first name and last name\ncan sit on the same row. I am not sure why the middle name is required here, since technically a person might not have\none.",[15,5841,5842],{},"Here is an example of what I mean. This is my old UI\u002FUX tip.",[736,5844,5847],{":hasBorder":776,":rounded":776,":zoomable":776,"alt":5845,"src":5846},"Form design tip showing grouped related fields in the same row","\u002Fimg\u002Fdoctors-am\u002Fform-tip.png",[778,5848,5849],{"v-slot:description":593},[15,5850,5851],{},"Related fields can be grouped without turning the whole form into a multi-column layout",[15,5853,5854],{},"Even though we have two or even three columns on certain rows, it does not mean the whole form should be considered a\nmulti-column layout.",[15,5856,5857],{},"In our case, the only inputs that can probably be combined are the first and last names. The middle name might go on the\nsecond row.",[15,5859,5860],{},"However, depending on the overall design and the expected name order, I would even consider putting first name, last\nname, and middle name in one row if there is a typical sequence for filling them in. For example, in some countries\npeople commonly use \"Last Name\", \"First Name\", \"Middle Name\" in that order.",[1049,5862,5864],{"id":5863},"grouping-data","Grouping data",[15,5866,5867],{},"What else could improve the form? Group related inputs.",[15,5869,5870],{},"For example, the form could have vertical groups such as:",[984,5872,5873,5876,5879],{},[987,5874,5875],{},"First name, last name, middle name, and phone number (personal data).",[987,5877,5878],{},"Specialty and name of institution \u002F position.",[987,5880,5881],{},"Email and password (auth data).",[15,5883,5884],{},"In contemporary interfaces, these groups could even become three different steps, so we ask only a few questions at a\ntime.",[1049,5886,5888],{"id":5887},"dropdown-search","Dropdown search",[15,5890,5891],{},"If you have a dropdown with many items, please provide search. It never hurts.",[736,5893,5896],{":hasBorder":776,":rounded":776,":zoomable":776,"alt":5894,"src":5895},"Long dropdown menu with many institution names and no search field","\u002Fimg\u002Fdoctors-am\u002Fdropdown-search.png",[778,5897,5898],{"v-slot:description":593},[15,5899,5900],{},"Long dropdowns become much easier to use when they include search",[41,5902,5904],{"id":5903},"tiny-useful-css-trick","Tiny useful CSS trick",[15,5906,5907,5908,5911],{},"I remember googling the latest CSS features while writing ",[19,5909,2384],{"href":5910},"https:\u002F\u002Fcss.vpon.me",". There was a case\nwhere different translations could make some elements fail to adapt to the width of their content.",[5695,5913,5915],{":hasBorder":776,":rounded":776,"src":5914},"https:\u002F\u002Fqxann4pn85b4ge43.public.blob.vercel-storage.com\u002Fdoctors-am-fit-content.mp4",[778,5916,5917],{"v-slot:description":593},[15,5918,5919],{},"Some translated labels do not adapt to the width of their content",[15,5921,5922,5923,5926],{},"To fix it, we can use the ",[1609,5924,5925],{},"width: fit-content;"," property.",[1192,5928,5929],{},[15,5930,3879,5931,5934],{},[1609,5932,5933],{},"fit-content"," sizing keyword represents an element size that adapts to its content while staying within the limits\nof its container.",{"title":593,"searchDepth":594,"depth":594,"links":5936},[5937,5938,5939,5944],{"id":5665,"depth":594,"text":5666},{"id":5746,"depth":594,"text":5747},{"id":5797,"depth":594,"text":5798,"children":5940},[5941,5942,5943],{"id":5829,"depth":1146,"text":5830},{"id":5863,"depth":1146,"text":5864},{"id":5887,"depth":1146,"text":5888},{"id":5903,"depth":594,"text":5904},"2026-06-13T10:00:00+04:00","A practical UX review of an Armenian medical aggregator, focused on search, information architecture, hidden inputs, and layout shifts.\n","\u002Fimg\u002Fdoctors-am\u002Fsearch-inputs.png",{},"\u002Farticles\u002Fa-ux-review-of-an-armenian-medical-aggregator",{"title":5642,"description":5946},{"loc":5949},"articles\u002F29.A-UX-Review-of-an-Armenian-Medical-Aggregator","d-4sVEWobF2wqFZIF-GuRSRV_S4pP1h5XEicMKzpcO0"]