Citations UX Audit

In this project, I evaluated the user experience (UX) of citation and source attribution mechanisms in three generative search interfaces: SearchGPT, Perplexity, and Google SGE. The analysis focuses on the clarity, accessibility, and interactivity of citation presentations based on observations from a UX audit.

The goal of this project was to learn from the AI industry leaders and implement the lessons to improve the UI and UX of CustomGPT AI Agents.

What

Chat Agent UI

When

Oct 2024

Search GPT

PROS

Expandable Dropdown for Sources:
- The dropdown provides transparency by showing the number of sources used.
- It enhances user trust by offering clickable links with descriptive elements (icon, title, tagline, and parent domain).
Interactive Inline Citations:
- Inline citations use source initials instead of numbers, making them visually distinct.
- Hover interactions reveal a detailed card with an icon, title, excerpt, and URL, aiding quick evaluation of source credibility.
Relevant Citation Emphasis:
- By including the most relevant citation inline within the text, SearchGPT prioritizes key references and contextual relevance.

CONS

Overlapping Citation Styles:
- The combination of badges, hover cards, and dropdowns may overwhelm users with redundant information.
Inline Citation Design:
- Using source initials might confuse users unfamiliar with the convention, potentially decreasing citation clarity.

Lessons From Search GPT

Consolidate citation styles to reduce cognitive load.
Offer optional onboarding or tooltips explaining the initials for first-time users.

Google SGE

PROS

Minimalist Design:
- Google’s simple UX makes the interface intuitive and approachable, reducing barriers to entry for users of varying tech literacy.
Efficient Mobile View:
- Mobile interactions leverage overlays and icons effectively, ensuring source access is seamless in constrained screen spaces.
Inline Citation Simplicity:
- Small icons indicating citations are unobtrusive and maintain the flow of reading.
- Sidebars and overlays provide an uncluttered view of related sources.

CONS

Lack of Hover Interactivity:
- The absence of hover states limits the immediate availability of detailed source information, potentially frustrating desktop users.
Limited Citation Transparency:
- Inline citations only appear as small icons, which may not convey sufficient source information upfront.

Lessons From Google SGE

Add hover states for inline citations on desktop to improve usability.
Explore ways to provide more contextual information upfront without compromising the minimalist design.

Perplexity AI

PROS

Comprehensive Citation Emphasis:
- Citations are displayed in four distinct styles and locations (before the response, inline, source cards, and sidebar), ensuring users have multiple access points to verify information.
Interactive Source Cards:
- Three distinct card styles balance detailed information with concise presentation.
- Hover states provide additional context, such as titles, links, and short descriptions, without disrupting the main interaction.
Data Representation:
- Tabular data presentation enhances readability and allows for direct follow-up queries, showcasing adaptability and depth.
Actions Bar with Citation Menu:
- Centralizing actions at the response’s end, including a menu for all citations, aids accessibility and ensures users can locate sources efficiently.

CONS

Overemphasis on Citations:
- Multiple citation placements and styles may clutter the interface and lead to decision fatigue.
Source Sidebar:
- While useful, the sidebar could disorient users by requiring a shift in focus from the primary content.

Lessons From Perplexity AI

Simplify the citation system by merging or streamlining redundant styles.
Implement a progressive disclosure approach, where users see basic citations by default but can access detailed views if desired.

Comparative Analysis

Feature	Search GPT	Google SGE	Perplexity
Citation Transparency	Moderate – dropdowns and badges	Low – minimal inline icons	High – multiple focused interactions
Interactivity	High – hover cards and dropdowns	Low – clickable icons only	Very High – hover states, cards, sidebar
Mobile Responsiveness	Moderate – dropdowns may feel complex	High – efficient overlays and carousel	Moderate – sidebards can be intrusive
Design Simplicity	Moderate – multiple styles	High – clean and straightforward	Low – overemphasis on citations

Overview

Each platform exhibits unique strengths and challenges in citation UX. SearchGPT balances interactivity with complexity, Perplexity emphasizes transparency at the cost of simplicity, and Google SGE excels in minimalism but lacks detail. By integrating the best practices across these systems, each platform can enhance its user experience to better meet the needs of diverse audiences

Recommendations for CustomGPT

By combining Search GPT’s dropdown and hover states, Perplexity’s layered interactivity, and Google SGE’s simplicity and mobile optimization, CustomGPT can create a robust, user-friendly citation system that is transparent, accessible, and engaging for users.

Balanced Citation Visibility and Simplicity

- Inline Citation Badges with Hover States:
  Use visually distinct inline badges that provide essential details (e.g., source initials or icons) while maintaining a clean interface. On hover, show a card with the title, description, and link, allowing users to explore sources effortlessly.
  - Why? Combines Search GPT’s hover cards with Google SGE’s simplicity to provide clarity without clutter.
- Expandable Source Summary Dropdown:
  Include an expandable dropdown summarizing the number of sources used. Upon expansion, display clickable cards with source icons, titles, taglines, and domains for easy reference.
  - Why? Builds trust by summarizing and contextualizing the references, inspired by Search GPT’s transparency.

Tiered Source Representation

- Multifunctional Citation Cards:
  Display a tiered approach similar to Perplexity:
  - Most Relevant Citation: Prominently show the most relevant source at the end of the answer for quick user context.
  - Grouped Source Cards: Use horizontal scrolling or expandable sections for additional sources, styled compactly with icons and links.
- Dedicated “View All Sources” Option:
  Provide a sidebar or overlay where users can explore all sources in a structured and searchable format. Include sorting or filtering options (e.g., relevance or recency).
  - Why? Aligns with Perplexity’s sidebar and Google SGE’s overlay to cater to users seeking deeper exploration.

Interactive Design Features

- Efficient Mobile UI:
  For mobile users, display a citation icon on the top-right corner of the response. On tap, present a full-screen overlay with a scrollable list of source cards, similar to Google SGE’s mobile efficiency.
  - Why? Ensures optimal usability across devices.
- Actionable Data Tables:
  If responses include data, present it in tabular form with direct links to sources and the ability to ask follow-up questions.
  - Why? Empowers users to interact with structured data, leveraging Perplexity’s data-centric design.

Consistency in Citation Placement and Styling

- Unified Inline Citation Style:
  Use a consistent style for all inline citations (e.g., badge or icon) to avoid user confusion. Ensure badges link directly to source details or a detailed hover card.
  - Why? Reduces cognitive load by standardizing interaction patterns.
- Source Highlighting for Trustworthiness:
  Highlight verified or most credible sources in the list with a subtle indicator (e.g., a checkmark or “verified” tag).
  - Why? Encourages reliance on authoritative information.

Customization and User Control

- Citation Preferences Settings:
  Allow users to customize how citations appear (e.g., inline-only, dropdown, or full sidebar view).
  - Why? Accommodates diverse user preferences.
- Collaborative Source Feedback:
  Enable users to flag citations as irrelevant or inaccurate, improving system credibility over time.
  - Why? Encourages user engagement and ensures data accuracy.