I built a Material Design-style Floating Action Button (FAB) without using any JavaScript. This was achieved using only HTML and CSS, leveraging anchor links and the ":target" selector to control visibility and create the open/close functionality. Clicking the FAB opens a menu with links to different actions, and clicking a close button hides the menu. This approach does have the trade-off of adding entries to the browser history, but it's a pure HTML/CSS solution for a common UI element.
Frankie & Benny's offers a web-based payment system accessible via QR code, eliminating the need for a dedicated app. I tested the process, and while the Google Pay option encountered a glitch (already reported), the overall experience was smooth and efficient, taking about a minute to complete.
The implementation of GDPR consent across the industry is flawed and confusing. Many consent mechanisms offer choices that seem meaningless, as users often can't discern the actual impact of their selection. For example, the difference between accepting all cookies and using only necessary cookies is often unclear, both in terms of functionality and verifiability.
I've just added the pinch-zoom-element web component to my photography blog. It's a tiny (~3kb), dependency-free custom element that allows for easy pinch-zooming on any HTML element. Check out the implementation on my blog (touch-enabled device/trackpad needed for testing) and see how simple it is to integrate! This element was crucial for the Squoosh app and perfectly exemplifies the power of web components for clean, reusable UI. I hope to see wider adoption of elements like these, especially for common use-cases like image zooming on e-commerce sites.
I recently conducted an experiment challenging common documentation "best practices." I found that some widely accepted guidelines may not be as effective as we think. My experience highlighted the need for data-driven approaches to documentation, such as using "was this page helpful?" feedback widgets, to truly understand what makes documentation helpful. I encourage everyone to adopt more rigorous methods for evaluating documentation effectiveness.
Feature Policy is a new web platform API designed to help developers maintain control over their web app's performance, security, and user experience. It allows developers to define policies that restrict access to certain features or modify the browser's default behavior. Examples include controlling autoplay, access to sensitive APIs, usage of fullscreen, preventing use of outdated APIs, and managing image sizes. Policies act as a contract between the developer and the browser, ensuring the developer's intent is followed even as the project grows and evolves. While adoption is a concern, its potential benefits for performance, security and privacy are substantial, especially if tied to incentives like app store listings.
The Gestalt principles are rules explaining how humans perceive organized patterns. This post focuses on the principles related to grouping: proximity, similarity, common fate, continuity, closure, and prägnanz.
Measuring the impact of autofill is crucial. In WebKit/Blink browsers, the -webkit-autofill pseudo-class helps track autofill, but it's not supported in Firefox. I've found a workaround in Firefox using the input event, checking for the absence of keyboard interaction. Ideally, a standardized :autofill pseudo-class and a dedicated onautocomplete event would simplify this process, allowing developers to measure and manage autofill effectively.
Tired of typing in usernames and passwords? So are your users. Autofill helps, but the Credential Management API gives developers more control. It lets you securely store and retrieve user credentials, simplifying logins with just a couple of taps. This Chrome-only API allows access to a PasswordCredential object, rather than raw passwords. It works with other improvements like proper autofill fields (email, username, new-password, current-password) and offers a potential future where landing and login pages are obsolete. Imagine a web where users stay logged in seamlessly, only re-authenticating when necessary. This post covers how to implement the API, including a demo and sample code. Plus, explore how it might combine with the Web Payment Request API to streamline e-commerce.
This post revisits the UX issues that contributed to the demise of Web Intents. We never adequately addressed the wide array of potential actions and data types, leading to a generic and confusing user experience. Handling data return from a long-running operation in another app proved problematic, especially if the initiating app closed. The lack of an explicit API for expecting returned data, similar to Android's startActivityForResult, further hindered the development of intuitive UI affordances. The open nature of Web Intents resulted in a proliferation of schemas and protocols, making standardization difficult. Users were forced to choose an app for every action, and developers lacked control over how apps launched, leading to inconsistent experiences. Finally, the absence of reliable fallbacks for unsupported intents eroded developer confidence and potentially left users stranded. In short, a combination of UX shortcomings ultimately led to Web Intents' downfall.
I've been working on AJAX Tagger version 2 and it's ready for everyday use! It leverages APIs from Yahoo, Amazon, Flickr, and Technorati, along with Wikipedia and even your own site's content to find related articles. It's all AJAX-based, uses a unique request queue, and outputs in both OPML and HTML. Plus, it even suggests related Amazon products. Currently, it's IE-only, so check it out at www.kinlan.co.uk/AjaxExperiments/AjaxTag2 and let me know your thoughts! The UI/UX needs some polish, but that's next on my list.
This post kicks off documenting the requirements for the next version of AJAXTagger. The goal is to create a successful application (by my definition) by outlining features across functional areas, UI/UX, client/server-side business logic, data access, and dependencies. Key features include easy journal tagging, related information retrieval (tags, articles, blogs, websites), diverse search provider integration, streamlined results presentation, image inclusion, and efficient article pulling/saving. The UI should minimize user effort, provide immediate feedback, and offer information hiding. Performance is crucial, targeting IE6/7 and Firefox, with emphasis on minimal server round trips, client-side optimization, and error handling. Data storage is preferably client-side, with external access optimized for speed and resilience. External dependencies include various search engines/services, while internal constraints involve limited server access and reliance on HTML, JavaScript, and XmlHTTPrequest.
I'm still waiting for a response from Start.com regarding my UI improvement suggestion. Even though Robert Scoble mentioned their quick response to feedback, I haven't heard anything about my suggestion to improve the functionality of the close ("x") button on content panes. I've sent an email and even blogged about it, but no luck so far. Hopefully, they'll address it soon!
This is the fifth installment in my series on the AJAXTagger's failures. A major issue is its lack of intuitiveness. Users couldn't understand its purpose or how to use it without a demo. While it significantly reduced my tagging time, the next version needs improvements. I'm looking for feedback on how to make it more user-friendly, including better visual cues, a clearer UI, and improved documentation. Email me or comment with your suggestions!
I'm a big fan of Channel 9, a Microsoft website showcasing developer insights. Their recent redesign is fantastic! They've moved from a traditional blog layout to a more concise "Most Recent" section, putting important content front and center. The new comment section design is also visually appealing, with a unique element that seems to break free from traditional HTML constraints. The addition of a tagging section, similar to Technorati, is a valuable feature, allowing users to easily see popular topics and gauge community interest. Overall, two thumbs up for the Channel 9 redesign – excellent work!
