Dots

Browse knowledge dots with only clicking and scrolling in mobile phone. Typeless chat UI design.

Comment

The Problem with Traditional AI Chat

AI chatbots have a fundamental UX problem: they either give answers that are too concise (leaving you wanting more) or too detailed (overwhelming you with information). The back-and-forth chat interface forces you to constantly type follow-up questions, breaking your flow of learning.

Our Solution: Graph-Based Knowledge Navigation

Dots reimagines knowledge exploration as a graph traversal experience:

  1. Start with a Search: Your topic becomes the starting node
  2. Explore Connected Points: The app presents a concise list of related knowledge points (connected nodes)
  3. Dive Deeper: Click any point to jump to that node and explore its connections
  4. Keep Traversing: Continue exploring the knowledge graph naturally, following your curiosity

This creates a seamless learning experience where you're always one click away from deeper understanding, without the friction of typing questions.

The Graph Metaphor in Action

Think of learning as exploring a knowledge graph:

  • Search Query = Starting node in the graph
  • Knowledge Points = Connected nodes with relationships
  • Click to Expand = Traversing edges to reach new nodes
  • Hierarchical Structure = Natural graph topology with parent-child relationships

This approach eliminates the need for constant typing while providing structured, explorable knowledge that adapts to your learning path.

Technical Implementation

Built as a PWA mobile app with focus on touch-first interaction:

  • Graph-like Data Structure: Knowledge points connected in a hierarchical, explorable tree
  • Touch-Optimized UI: Large, tappable areas for effortless mobile browsing
  • Smart Caching: Instant navigation between previously explored nodes
  • PWA Architecture: Installable mobile app with offline capabilities
  • No-Typing Interface: Pure browsing experience with minimal text input

Key Design Principles

  1. Zero Typing: Learning should flow naturally without constant text input
  2. Visual Hierarchy: Information organized in digestible, connected chunks
  3. Mobile-First: Optimized for touch interaction and mobile browsing
  4. Graph Traversal: Each interaction moves you through the knowledge space
  5. Context Preservation: Maintain your learning path while exploring new branches

Built With

Share this project:

Updates