Good design hasn’t changed with AI — John Pham, SF Compute

Key Concepts

• Design Principles: Speed, Trust, Accessibility, Delight
• Speed: Perceived time, feedback, jank, LCP, INP, CLS
• Trust: Expectation setting, error prevention, affordances
• Accessibility: Screen readers, contrast, motion, reduced motion preference, semantic HTML, progressive disclosure
• Delight: Care, user rewards, storytelling, peak-end rule
• Feature Parity: No longer a key differentiator due to AI advancements
• Prediction Cone: Technique for improving nested menu usability

Design Philosophy

The speaker emphasizes that despite advancements in AI, the core principles of good design remain constant. Design is defined as how people experience your product, encompassing every touchpoint from UIs and APIs to documentation and even tweets. The goal is to influence user feelings, moving them from feeling "slow and scared" to "fast and powerful." In an era where feature parity is easily achieved, design becomes the key differentiator.

Four Pillars of Good Design

The speaker outlines four key principles:

1. Speed

• Goal: Create experiences that feel fast and don't slow down the user.
• Components:
  • Perceived Time: Aim for first paint under 300ms, as humans perceive things under 400ms.
  • Feedback: Ensure UI elements respond quickly to user actions.
  • Jank: Eliminate stutters and ensure fluid experiences at 60+ FPS.
• Techniques:
  • Server-side rendering
  • Caching
  • Minimizing bundle size
• Metrics:
  • LCP (Largest Contentful Paint): Measures loading performance.
  • INP (Interaction to Next Paint): Measures responsiveness.
  • CLS (Cumulative Layout Shift): Measures visual stability.
• Example: SF Compute onboarding loads quickly by minimizing bundle size and using server-side rendering.

2. Trust

• Goal: Build products that are reliable, transparent, and forgiving.
• Principles:
  • Products should never "lie."
  • Products should care about the user.
  • Products should forgive user mistakes.
• Techniques:
  • Expectation Setting: Clearly communicate what the user can expect from a process (e.g., "This will take three steps and under a minute").
  • Progress Updates: Show users how far they've progressed in a process.
  • Straightforward Communication: Be clear about time zones and other potentially confusing information.
• Example: SF Compute sets expectations for the onboarding call, emphasizing it's not a sales call and offering alternative solutions if their product isn't a good fit.

3. Accessibility

• Goal: Ensure products are usable by everyone, including those with disabilities.
• Considerations:
  • Screen Readers: Ensure the product works well with screen readers.
  • Contrast: Use sufficient contrast for readability.
  • Motion: Be mindful of motion, as it can cause sickness for some users.
• Techniques:
  • Respect the "reduced motion" preference.
  • Use autocomplete to speed up form filling.
  • Avoid layout shifts.
  • Use progressive disclosure to reduce cognitive load.
  • Use semantic HTML and form labels.
• Example: SF Compute pauses animations when the "reduced motion" preference is enabled. They also use autocomplete and progressive disclosure in their onboarding form.

4. Delight

• Goal: Create memorable and enjoyable experiences that turn users into "super fans."
• Components:
  • Care: Show users that you care about their needs.
  • User Rewards: Provide unexpected benefits or pleasant surprises.
  • Storytelling: Craft a narrative around the product.
• Techniques:
  • Use color psychology to influence perception of time.
  • Apply the "peak-end rule" by ending the experience on a high note.
• Example: SF Compute ends their onboarding experience by revealing a beautiful scene of San Francisco.

SF Compute Examples

The speaker uses SF Compute's onboarding and GPU buying experiences as case studies to illustrate these principles.

Onboarding Experience

• Speed: Achieved through server-side rendering, caching, and minimizing bundle size. The fog animation is created using a single 14KB transparent image with CSS animations.
• Trust: Setting expectations about the length of the process and the purpose of the onboarding call.
• Accessibility: Respecting the "reduced motion" preference and using autocomplete for address fields.
• Delight: Ending the experience with a visually appealing scene of San Francisco.

GPU Buying Experience

• GPU Habitat: A live camera feed of the GPUs, created using stacked divs and a looping video. The panning effect is achieved by moving the video within the viewport.
• Trust: Showing care by finding users better prices, even if it means making less money.
• Accessibility: Allowing users to input time in different units (days, hours, weeks).
• Delight: The GPU habitat provides a unique and engaging experience.

Additional Examples

• Nested Menu (Versail): Uses a "prediction cone" to improve usability by anticipating the user's intended path.

Key Takeaways

• Good design is about more than just aesthetics; it's about creating a positive user experience.
• The four principles of speed, trust, accessibility, and delight are essential for building successful products.
• Even small design decisions can have a significant impact on user perception and behavior.
• By focusing on these principles, companies can differentiate themselves in a competitive market and turn users into loyal advocates.