Крошечный ux твик, который имеет большое значение

Крошечный ux твик, который имеет большое значение

7 августа 2025 г.

Когда я строю программное обеспечение, я стараюсь заставить приложение запомнить вещи. Таким образом, пользователю не нужно делать то же самое снова и снова.

Большинство приложений сбрасывают все на обновлении или когда вы вернетесь позже. Это становится раздражающим быстро.

Вот что я имею в виду:

  • Вы снова нажимаете ту же вкладку
  • Вы переоцениваете свой фильтр или сортировку
  • Вы переписываете тот же ввод или приглашение
  • Вы переключаете темный режим каждый раз
  • Вы снова и снова расширяете ту же панель

Это маленькие вещи, но это складывается. И это заставляет ваше приложение чувствовать себя хуже.

ИспользоватьlocalStorageпомнить вещи

Теперь я экономлю небольшие государственные кусочки вlocalStorageПолем Достаточно, поэтому приложение кажется более стабильным и последовательным.

Вот что я обычно сохраняю:

  • Последняя открытая вкладка
  • Темный или легкий режим
  • Проект ввода или приглашение
  • Фильтры или настройки сортировки
  • Рухнула/расширенная боковая панель
  • Уволенные модалы или всплывающие окна (обычно те, которые требуют немедленных действий)
  • Недавно использованные цвета
  • Режим предварительного просмотра (мобильный/настольный компьютер)
  • Выбранное язык

Ничего слишком глубокого или серьезного, только то, что помогает кому -то продолжать, где он остановился.

Пример: сохранить и загрузить темный режим

Вот основной пример с использованием LocalStorage для сохранения настройки темного режима:

// Save mode
localStorage.setItem('theme', 'dark'); 

// Load mode
const savedTheme = localStorage.getItem('theme'); 
if (savedTheme === 'dark') {
    document.body.classList.add('dark');
}

Или в React:

useEffect(() => {
    const saved = localStorage.getItem('theme');
    if (saved) {
        setTheme(saved);
        // assume setTheme updates UI
    }
}, []);

const toggleTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
};

Быстрые советы

  • Храните только вещи, которые облегчают приложение в использовании
  • Не сохраняйте конфиденциальную информацию (например, токены Auth или личные данные)
  • Дайте пользователям возможность сбросить предпочтения, если это необходимо
  • Используйте небольшую обертку или пользовательский крюк, если вы используете это много

Вот и все

Это не большая особенность. Но это заставляет ваше приложение чувствовать себя более гладким. Люди не замечают этого, когда это работает - они просто перестают раздражаться.

Если вы создаете то, что люди будут использовать более одного раза, это важно.

Что еще вы экономите с LocalStorage, который улучшает UX? Отбросьте свои собственные шаблоны ниже. Мне всегда любопытно, что делают другие.


Оригинал
PREVIOUS ARTICLE
NEXT ARTICLE