Transparent overlay image to introduce web site features/elements

The transparent overlay image to introduce web site features/elements is an interesting UI Pattern to do more with less - a visual explanation is better than reams of notes.

Don't know if Gmail was the first popular website to use this idea but I now see a lot of other websites use this kind of an overlay to visually explain new UI elements or features that are added.


Gmail used this overlay idea earlier to show Gmail keyboard shortcuts with the "?" keyboard shortcut.

Comments

Post a Comment

Popular posts from this blog

From Stiff Chatbot to Savage Sidekick: The UI/UX Glow-Up Story

Image
It's interesting how the UI/UX of AI assistants has been evolving over time.  The interaction options with each individual Chat and a Conversation thread have gradually expanded over time.  ChatGPT Gemini Grok Chat Copy  Good response Bad response Share  Try Again Branch in new Chat  Read Aloud Report Message Good response  Bad response  Copy response Double check response  Listen  Export to Docs Draft in Gmail Export to Replit  Report Legal issue Regenerate  Read Aloud  Start Thread (2/26) Copy  Create share link  Love it  Needs improvement  Report Issue  Export to PDF Conversation Share  Start a group chat Rename  Pin Chat Archive  Delete Share  Pin  Rename  Delete Rename  Pin  Delete Claude Copilot Perplexity Chat Copy Give positive feedback Give negative feedback Retry Go...
Read more

GitHub Copilot Certification Exam Prep

Image
There is an exciting 4-Week Course on GitHub Community to help developers master GitHub Copilot & prepare for the GitHub Copilot Certification Exam . The threads contain a very useful curation of study material spanning the 7 Domains that will be covered in the exam & a knowledge check with practice questions for each of the 4 weeks. Click on the links below corresponding to the week numbers for the material. I plan to compile the reasoning for the answers to the practice questions here so that the notes can be quick reference for the exam & later - Week 1 GitHub Copilot is trained on publicly available open-source repositories and large proprietary datasets curated by GitHub. It does not use private repositories of individual users. Documentation and Stack Overflow discussions are not primary data sources for Copilot. GitHub Copilot enhance a developer's productivity during pair programming by providing inline code suggestions based on context Key ethical consideratio...
Read more

HOW TO add a header or footer to a dynamically generated Word document

Image
There was a question recently on my CodeProject article "Dynamically generate a MS Word document using HTML & CSS" . The article describes how to generate a Word document programmatically without using any components, by exploiting the formatting features exposed through Office XML and CSS. The questioner wanted to know how to add a custom header and footer and show something like Page X of Y (total pages). Based on what I have tried so far, showing a header and footer using Office XML in MS Word is not as easy as it is in Excel . If you want to keep the code simple & don't need any great fireworks i.e. you will just settle for page numbers in the header or footer then it's a matter of adding a few lines to the original source code. The code can be viewed at this Github Gist Update (1-Sep-2010): To add a custom header & footer, check this new post To add a footer that shows Page number at the bottom right, here are the steps - 1) Add these classes...
Read more