5 หลักการออกแบบ UI ที่ช่วยให้ผู้ใช้ทำงานได้เร็วขึ้น

// <Cross /> Bad: ปุ่มทุกอันดูเหมือนกัน
<div className="flex gap-2">
  <button className="px-4 py-2 bg-gray-500">Cancel</button>
  <button className="px-4 py-2 bg-gray-500">Save</button>
</div>
 
// <Check /> Good: Primary action เด่นกว่า
<div className="flex gap-2">
  <button className="px-4 py-2 text-gray-700 hover:bg-gray-100">
    Cancel
  </button>
  <button className="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 shadow-md">
    Save
  </button>
</div>

// <Cross /> Bad: ไม่รู้ว่าต้องกรอกอะไร
<input type="text" name="field1" />
 
// <Check /> Good: ชัดเจน มีตัวอย่าง
<div>
  <label className="block text-sm font-medium mb-1">
    เบอร์โทรศัพท์ <span className="text-red-500">*</span>
  </label>
  <input
    type="tel"
    placeholder="0812345678"
    className="w-full px-3 py-2 border rounded-md"
  />
  <p className="text-xs text-gray-500 mt-1">
    กรอกเบอร์โทรศัพท์ที่สามารถติดต่อได้
  </p>
</div>

import { useState } from 'react';
import { Loader2, Check, X } from 'lucide-react';
 
function SubmitButton() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
 
  const handleSubmit = async () => {
    setStatus('loading');
    try {
      await submitForm();
      setStatus('success');
      setTimeout(() => setStatus('idle'), 2000);
    } catch (error) {
      setStatus('error');
      setTimeout(() => setStatus('idle'), 2000);
    }
  };
 
  return (
    <button
      onClick={handleSubmit}
      disabled={status === 'loading'}
      className="px-6 py-2 bg-blue-600 text-white rounded-md flex items-center gap-2"
    >
      {status === 'loading' && <Loader2 className="animate-spin" size={16} />}
      {status === 'success' && <Check size={16} />}
      {status === 'error' && <X size={16} />}
      {status === 'loading' ? 'กำลังบันทึก...' : 'บันทึก'}
    </button>
  );
}

// <Cross /> Bad: ปุ่มเล็กเกินไป
<button className="px-2 py-1 text-xs">Delete</button>
 
// <Check /> Good: ขนาดเหมาะสม คลิกง่าย
<button className="min-w-[44px] min-h-[44px] px-4 py-2 flex items-center justify-center">
  Delete
</button>

import { useEffect } from 'react';
 
function Modal({ isOpen, onClose, onSave }) {
  useEffect(() => {
    if (!isOpen) return;
 
    const handleKeyDown = (e: KeyboardEvent) => {
      // Esc to close
      if (e.key === 'Escape') {
        onClose();
      }
 
      // Cmd/Ctrl + S to save
      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
        e.preventDefault();
        onSave();
      }
    };
 
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose, onSave]);
 
  return (
    <div>
      {/* Modal content */}
      <div className="text-xs text-gray-500">
        Press <kbd>Esc</kbd> to cancel, <kbd>⌘S</kbd> to save
      </div>
    </div>
  );
}