AI and "Command + K"
With the advent of GPT and natural language AI tools, smart search technology has become an increasingly familiar element of digital life. We are living in an age where this technology has changed how people interact with their machines overnight - people are having chat conversations with an interface to carry out complex tasks. Technologists are exploring how to apply this technology to their products. As a design intern with Miso.ai, I have been researching different types of search interfaces, such as Command+K. I’ve become intrigued by the idea that Command + K is an underutilized but powerful tool that should be implemented in more B2C websites.
Given Miso’s emphasis on the future of search, UX, and real-time personalization, I wanted to explore the potential that Command + K offered particularly for e-commerce.
Command + K or Ctrl + K is a UI component (i.e. a pop-up window that’s activated via a keyboard shortcut) that allows users to quickly navigate to specific places in a website or perform key functions. (For an in-depth explanation of Command + K, please check out Maggie Appleton’s article on this topic.) Command + K is very useful for streamlining work. For example, the Command + K window can allow users to execute key actions without having to dig through menus, saving them a lot of time over a few hours. In my research, I was excited by the examples from dribbble.com combining this tool with AI technology to conceptualize a powerful user personalization tool. However, none of the examples I saw (as of spring in 2023) were created for B2C websites and were all centered around productivity and B2B settings such as the example below.
Example 1 - https://maggieappleton.com/command-bar
Above is an example of a Command + K panel by Dribbble user Emmanuel Ikechukwu. When looking at the example I was drawn to the section entitled “AI Prompts". Ikechukwu’s design implies that users can simply click on one of the prompts (a core function) and then use natural language to input the details. One example is to quickly create a calendar event by typing in the event description, the date and time, and the guests – and then letting AI handle managing his other calendar events that may be affected by the new meeting. This fits in perfectly with Command + K as a streamlining tool as it allows users to avoid navigating through multiple layers of GUIs while also limiting the number of manually executed tasks.
Despite these benefits of Command + K, why have we not seen this UI pattern more widely, especially in e-commerce? One possible reason is that many e-commerce sites of the past had a more focused scope of use. For example, they were likely centered around the browsing and purchasing of products. In recent years, however, the importance of multifunctionality has increased. Many websites no longer serve as just digital storefronts where users can purchase items, but are now places with features such as curated collections, blogs, two-sided marketplaces, and even social hubs. In addition, interaction with brands can take place across several different social media platforms which creates even more multifunctionality across the web. Needless to say, even consumer-facing websites are becoming more convoluted as the number of possible actions has increased.
But what would a Command + K window even look like for a B2C website? The following is an example I mocked up to illustrate how Command+K with a built-in personalization engine could be applied to a marketplace like GOAT.
The goal for this Command + K panel is to present a more personalized alternative home screen for the user which would include user-specific relevant information such as product recommendations and recent actions. GOAT attracts a variety of different users, from people searching for gifts to dedicated sneakerheads who make a living from buying and selling shoes. With Command + K each user would be able to have a tailored experience every time they launch the window. For example, if a college student who loves sneakers and closely follows the sneaker community. Being a college student they may want to save money so upon pulling up the window they would see results relating to new releases that are not as expensive. For users who are willing to spend more but still want a deal, a personalized Command + K panel could quickly bring up listings that have dropped in price since the user's last visit. Both GOAT and the user wind up benefiting from personalization as the more the user interacts with the site, the better the personalization becomes, thus incentivizing returning to the site and driving up the total traffic for GOAT.
Example 4 - Illustrating a Command + K interface personalized for a buyer-oriented experience
Example 2 - Emmanuel Ikechukwu on Dribble
Example 3 - Emmanuel Ikechukwu on Dribble
Example 6
One of the main features that a successful Command + K panel should have is natural language AI capabilities. In Example 2 and 3, Emmanuel Ikechukwu illustrated how natural language capabilities could be used for productivity purposes. In Example 4, I imagined how it could be used in a consumer setting. By using Natural Language AI, users can move beyond the limits of a keyword search algorithm. For example, if a user wanted a pair of Jordans that look like the ones they owned as a child but didn’t know exactly what they are called, they could enter a phrase such as “I want to buy a pair of Jordans with the old logo they used in the 90s” and would see listings matching that description. Command + K pairs well with Natural Language AI because it simplifies and makes browsing websites easy to operate. It also allows for personalized recommendations by mapping user behavior and making connections to relevant deals or products.
Another aspect of Command + K is its impact on accessibility and its ability to save time and energy for users with different impairments. For users with visual impairments, the shortcut can provide a quick way to jump to a desired destination or task, bypassing irrelevant content and getting the information they need faster.
Additionally, Command + K can assist users with motor function impairments by enabling them to navigate using text-to-speech tools to jump to the desired pages quickly. By reducing the number of steps required to navigate a site, Command + K can make the site's UX more accessible.
Command + K has the potential to become a powerful tool that combines intuitive user interface design with natural language AI to enhance the browsing experience.
While applications to date have primarily focused on productivity and B2B settings, the potential to adopt it across diverse settings such as B2C is feasible. This could benefit more than just developers and designers as it directly benefits everyday internet users. By saving time and accelerating tasks it enhances productivity for users across a variety of fields of interest. From a student looking for information, a shopper looking for new clothes or someone with an impairment seeking improved accessibility, Command + K allows for navigating digital spaces with ease.
https://maggieappleton.com/command-bar
https://dribbble.com/shots/20434594-Command-K-AI-Dark-Mode https://www.taskade.com/blog/history-keyboard-shortcuts-productivity/ https://kbar.vercel.app/
https://www.aivo.co/blog/advantages-and-disadvantages-of-chatbots https://www.datacamp.com/blog/what-we-know-gpt4 https://www.searchenginejournal.com/gpt-4-vs-gpt-3-5/482463/ \ https://www.demandsage.com/chatgpt-vs-google/#:~:text=ChatGPT%20serves%20a%2 0similar%20purpose,from%20billions%20of%20web%20pages. https://ask.thesearchengineer.com/why-google-went-from-a-rules-based-to-a-machine-l earning-based-engine
References
Example 5 - Illustrating a Command + K interface personalized for a seller-oriented experience