Best of UX — December 2024

  1. 1
    Article
    Avatar of uxplanetUX Planet·1y

    Best UX Practices for Designing a Sidebar

    Sidebars are crucial for navigation in modern web applications, organizing and presenting content in a structured way. Following best practices in designing sidebars enhances usability, efficiency, space optimization, accessibility, and flexibility, which significantly improve user satisfaction and productivity. Key elements include optimal sidebar width, dynamic navigation, easy account switching, expandable sub-items, space for updates, dark/light mode toggle, highlighting active sections, prioritizing essential information, adjustable widths, quick search features, targeted actions, and secondary sidebars for quick access. Testing with real users ensures continuous improvement.

  2. 2
    Article
    Avatar of PrismicPrismic·1y

    CSS Button Animations: 40 Ideas to Try + Code Examples

    Explore 40 creative CSS button animations designed to enhance user experience and make buttons stand out. From hover effects and 3D animations to click and SVG animations, these examples demonstrate a variety of techniques to inspire your projects. Learn how to use custom CSS, JavaScript, and tools to create visually engaging and interactive buttons.

  3. 3
    Article
    Avatar of uxplanetUX Planet·1y

    Progress Bar Design Best Practices

    Learn essential tips for designing effective progress bars including appropriate use cases, simplicity in design, avoiding misleading indicators, proper types of progress indicators, engaging users during long wait times, and creating smooth transitions upon task completion.

  4. 4
    Article
    Avatar of uxplanetUX Planet·1y

    10 laws of UX every designer should know

    Jon Yablonsky's Laws of UX are not legal rules but psychological insights based on behavioral science. They aim to help designers create better digital products by understanding user behavior. Key laws include Jakob’s Law, Hick’s Law, the Goal-Gradient Effect, the Serial-Position Effect, and others. Each law provides practical advice on improving user experience by adhering to familiar design patterns, simplifying decision-making processes, and leveraging cognitive behaviors such as placing emphasis on progress and grouping related elements.

  5. 5
    Video
    Avatar of juxtopposedJuxtopposed·1y

    I Redesigned the ENTIRE YouTube UI from Scratch

    The post details a comprehensive redesign of the YouTube UI, addressing various issues such as inconsistent icons, inefficient layout, and poor subscription management. The author suggests using unified icon styles, improving the explore and settings accessibility, and integrating better search and sorting options for a more user-centric experience. It also proposes features like a more intuitive video player, better comment section interactions, and enhanced subscription organization.

  6. 6
    Article
    Avatar of uxplanetUX Planet·1y

    Carousel Design Best Practices

    Carousels help display multiple pieces of content within limited space. To create effective carousels, ensure the first slide holds the most important content, avoid auto-rotation, limit the number of slides, and maintain visible navigation controls. Optimize for mobile, minimize content load times, and prevent motion sickness with subtle animations. Evaluate content needs to determine if a carousel is the best option, as other content presentation methods may perform better.

  7. 7
    Article
    Avatar of bramBram.us·1y

    Re-imagine the web with Scroll-Driven Animations

    Learn how to create engaging, app-like web experiences through fluid, responsive scroll-driven animations using CSS and JavaScript. The post addresses common concerns such as the necessity of JavaScript for certain effects, and how to manage user preferences for reduced motion animations.

  8. 8
    Article
    Avatar of cerbosCerbos·1y

    Why low latency is important in authorization

    Fast authorization checks are critical for ensuring smooth user experiences across applications. High latency can lead to user frustration, system performance issues, and increased costs. Solutions like Cerbos offer innovative approaches to mitigate latency, including running authorization checks close to the application, utilizing stateless systems, and optimizing policy management. These practices improve scalability and reliability, crucial for sectors like e-commerce, fintech, and streaming services.

  9. 9
    Article
    Avatar of habrhabr·1y

    How to create a better UX design for the users of younger generations

    Modern UX design for younger generations should focus on mobile-first strategies, concise content, social media integration, and interactive visual elements. For Gen A, designs must cater to different age groups with intuitive, engaging, and colorful interfaces. Encouragement and storytelling are also important to maintain children's interest.

  10. 10
    Article
    Avatar of medium_jsMedium·1y

    The next era of design is intent-driven

    Adaptive user interfaces are transforming design by reacting dynamically to user intent. From static digital filing systems to Google's Knowledge Graph, and now contextual UIs, the evolution has focused on providing immediate, context-aware information. Modern products like Amplitude, Arc, Gong, and Cursor.so exemplify how intelligent interfaces enhance usability across sectors by minimizing cognitive load and predicting user needs. This shift towards fluid, adaptive interfaces promises a more intuitive and connected digital experience.

  11. 11
    Article
    Avatar of communityCommunity Picks·1y

    Web Performance Calendar

    The post discusses the importance of introducing simpler web performance tools like Yellow Lab Tools to small organizations, emphasizing the need for software acceptance and buy-in. It argues that starting with easier tools can make people more comfortable before progressing to more complex solutions such as WebPageTest or analyzing Core Web Vitals. The approach helps users understand and take ownership of web performance issues without feeling overwhelmed.

  12. 12
    Article
    Avatar of communityCommunity Picks·1y

    Critical Industry Context for Junior Developers

    Building a strong developer portfolio requires understanding various roles such as product management, UX, QA, and even sales and marketing. This post provides practical tips for junior developers on how to incorporate these roles into their projects, focusing on aspects like defining requirements, prioritizing features, designing user interfaces, ensuring quality, and marketing their work effectively. Leveraging these multidisciplinary insights can make your portfolio more professional and competitive in the job market.

  13. 13
    Article
    Avatar of uxplanetUX Planet·1y

    Payment Button Design Best Practices

    An effective payment button is crucial for eCommerce and SaaS websites. It should have clear labels, be visually distinct, and provide visual feedback during processing. Disabling the button while processing and keeping wait times short are important to enhance user experience. Handling errors gracefully and prioritizing accessibility, especially for keyboard and mobile users, are also key practices.

  14. 14
    Article
    Avatar of hnHacker News·1y

    Code faster. Deploy instantly — Veryfront

    Veryfront offers a Figma kit with over 100 customizable components designed for light and dark modes, ensuring full responsiveness across all devices. The kit aims to streamline the design process with intuitive tools, allowing users to quickly build pages, add content seamlessly, and facilitate design to code handoff with organized layers, making collaboration with developers more efficient.

  15. 15
    Article
    Avatar of medium_jsMedium·1y

    Stop wireframing (but still start low-fidelity)

    Wireframing, once essential in UX design due to limited tools, is now seen as unnecessary with modern design systems and tools. The author argues that wireframes are just low-fidelity visual designs, doubling work without saving time. Alternatives like grey blocking, design systems, and OOUX offer faster, more effective ways to achieve the same goals.

  16. 16
    Article
    Avatar of logrocketLogRocket·1y

    Using retro designs from 90s websites to inspire modern UX

    The 90s were a time when personal websites became a form of self-expression, utilizing bold and eye-catching designs despite technological limitations. Elements like vibrant colors, playful animations, and pixelated icons characterized the era, creating a unique digital aesthetic that remains influential today. Retro design principles from the 90s can offer valuable insights and inspiration for modern UX, emphasizing the importance of balancing visual appeal with user-friendly functionality.

  17. 17
    Article
    Avatar of asayerasayer·1y

    Modern Alternatives to javascript:location.reload(true): How to Force a Page Reload in JavaScript

    Learn why `location.reload(true)` is deprecated and discover modern, cross-browser methods to force a page reload in JavaScript. Methods include appending a unique query parameter, using `window.location.reload()` without arguments, and reassigning `window.location.href`. Emphasizes best practices for reloading pages efficiently while considering performance and user experience.

  18. 18
    Article
    Avatar of wpbeginnerWordPress Beginner·1y

    12 Best WordPress eCommerce Website Examples (+ Design Tips)

    The post provides a list of the best WordPress eCommerce website examples with design tips to optimize your online store. It highlights the importance of features like mobile responsiveness, easy navigation, strong CTAs, quick loading times, and secure payment options. Each example includes key features and tips to learn from. The post also covers why WordPress is an excellent choice for eCommerce and offers a step-by-step guide on how to create your own online store using WordPress and related plugins like WooCommerce and Easy Digital Downloads.

  19. 19
    Article
    Avatar of communityCommunity Picks·1y

    The Visual Web Framework

    Participate in the Bad UI World Cup for a chance to win $3,700 and other great prizes by showcasing the worst user interface designs. Submissions need to be functional UIs, built in toddle, and can contain UI components like slider phone number selectors. The competition includes a review from UX experts and will announce winners shortly after the December 12th, 2024 deadline.

  20. 20
    Article
    Avatar of talhaHtml·1y

    Unlock Smooth Scrolling: How CSS Scroll Snap Transforms Your Website

    CSS Scroll Snap enhances your website's user experience by ensuring smooth navigation and perfect alignment of sections as you scroll. Ideal for image galleries, full-page designs, and product displays, this feature is compatible with all modern browsers, ensuring a fluid browsing experience without awkward stops.

  21. 21
    Article
    Avatar of logrocketLogRocket·1y

    Cart abandonment UX: Using UX design to make buyers stick around

    Design engineering is increasingly integral to UX roles, impacting job descriptions for UX designers. Personalizing UX design for unique user needs can enhance user experience. Sustainable font choices create eco-friendly, efficient, and fast-loading designs. The Von Restorff effect can help in amplifying user recall by making certain UI elements stand out.

  22. 22
    Article
    Avatar of devtoDEV·1y

    Progressive Web Apps: Technology Bridging Web and Mobile

    Progressive Web Apps (PWAs) combine the advantages of web and mobile applications, offering reliable, fast, and engaging user experiences. Key features include service workers for offline capabilities, caching, responsive design, installability, and push notifications. Businesses benefit from increased engagement, cost-effectiveness, and improved SEO, while users enjoy instant access, offline functionality, and smaller app footprints. Major companies like Twitter, Alibaba, and Starbucks have seen significant improvements after adopting PWAs.

  23. 23
    Article
    Avatar of communityCommunity Picks·1y

    HTMHell Advent Calendar 2024

    The HTMHell Advent Calendar, first launched in 2022, returns in 2024 with twenty-four new posts. The calendar features daily articles throughout December on topics such as security, accessibility, UX, and performance, contributed by authors from around the world.

  24. 24
    Article
    Avatar of perfplanetcalWeb Performance Calendar·1y

    Web Performance Calendar

    The author shares real-world examples of how over-optimizing for web performance metrics can sometimes be at odds with actual user experience. Cases include manipulating Lighthouse scores, issues with Core Web Vitals metrics like LCP and INP, and framework benchmarks. Developers are urged to be mindful of Goodhart’s law and prioritize user experience over metric scores.

  25. 25
    Article
    Avatar of infoqInfoQ·1y

    Prometheus 3.0 Brings New UI, OpenTelemetry Support and More

    Prometheus 3.0 brings a major overhaul with a new user interface based on Mantine UI, enhanced PromQL highlighting, and advanced visualization features. The update also includes support for OpenTelemetry with OTLP Ingestion and adds several new features like Remote Write 2.0 and Native Histograms. Users should review the migration guide to manage breaking changes and ensure a smooth transition.

See all UX archives