G
Gustav
Команда форума
Администратор
- Сообщения
- 26.497
- Реакции
- 53.568
Объяснение UX за 5 минут для новеньких фронтэнд-разработчиков
1. Продукт — для пользователей
Исследуйте целевую аудиторию. Команда должна понимать, какой продукт и для кого она делает. Какую проблему проблему решают пользователи? Зачем? О чем они заботятся? Это девочка подросток или пожилой мужчина? Это бэкенд-разработчик или парикмахер? Что они должны увидеть первым, когда зайдут в приложение? Как это упростить? Куда им стоит перейти дальше?
Это минимальный набор информации о пользователях, чтобы понять, как решить их проблему.
2. «Не заставляй меня думать» — первое правило юзабилити
Выдающийся продукт — понятен, выгоден, с уместным интерфейсом. Пользователи смотрят страницы, чтобы найти информацию. Дайте им её. Используйте подходящие заголовки, размеры шрифта, понятные иконки. Убедитесь, что навигация понятна, не перегружена и логична. Используйте хлебные крошки, чтобы пользователь знал, где он находится. Будьте осторожны и не переборщите с количеством элементов и уровней в меню. Пользователю не обязательно видеть все сразу. Выводите некоторые пункты, когда он уже добрался до места назначения.
3. Мобилка — не десктопная версия, а сжатая до меньших размеров
Представьте, вы реализуете мобильную версию приложения, где принимаете решение по компановке. У вас еще нет готового дизайна, и вас просят сделать его на Bootstrap. Mobile first в помощь. Так вы сосредоточитесь на действительно важных элементах и взаимодействиях.
Мобильными телефонами пользуются и горизонтально, и вертикально. Держат их, как правило, в одной руке, и касаются экрана одним пальцем. Это означает, что наиболее удобная область взаимодействия — нижняя часть экрана.
4. Ваш код устанавливает правила, поэтому убедитесь, что они верны
Не спрашивайте размер обуви пользователей при первом посещении, если вы не магазин обуви. Даже если вы магазин обуви, сначала покажите информацию о диапазоне размеров и дайте пользователям поиграть с цветами, материалами или областью применения.
Многие приложения запускаются сразу с формой регистрации, и это отсеивает большое количество пользователей. Пусть пользователи попробуют продукт, прежде чем вы запросите номер банковской карты. Не стройте стены. Вы хотите, чтобы люди пользовались тем, что вы создали? Дайте им попробовать.
Убедитесь, что картинки оптимизированы. Проверьте работу на маленькой скорости. Позаботьтесь о тех, кому ценен каждый байт.
5. Сайты с повсеместной анимацией мертвы
Успешный опыт взаимодействия пользователи получают благодаря юзабилити и преимуществам. Это круто — знать CSS, но не добавляйте анимацию, только чтобы показать свой скилл.
Вывод: Хватит вытрепываться, делайте пользователям удобно.
1. Продукт — для пользователей
Исследуйте целевую аудиторию. Команда должна понимать, какой продукт и для кого она делает. Какую проблему проблему решают пользователи? Зачем? О чем они заботятся? Это девочка подросток или пожилой мужчина? Это бэкенд-разработчик или парикмахер? Что они должны увидеть первым, когда зайдут в приложение? Как это упростить? Куда им стоит перейти дальше?
Это минимальный набор информации о пользователях, чтобы понять, как решить их проблему.
2. «Не заставляй меня думать» — первое правило юзабилити
Выдающийся продукт — понятен, выгоден, с уместным интерфейсом. Пользователи смотрят страницы, чтобы найти информацию. Дайте им её. Используйте подходящие заголовки, размеры шрифта, понятные иконки. Убедитесь, что навигация понятна, не перегружена и логична. Используйте хлебные крошки, чтобы пользователь знал, где он находится. Будьте осторожны и не переборщите с количеством элементов и уровней в меню. Пользователю не обязательно видеть все сразу. Выводите некоторые пункты, когда он уже добрался до места назначения.
3. Мобилка — не десктопная версия, а сжатая до меньших размеров
Представьте, вы реализуете мобильную версию приложения, где принимаете решение по компановке. У вас еще нет готового дизайна, и вас просят сделать его на Bootstrap. Mobile first в помощь. Так вы сосредоточитесь на действительно важных элементах и взаимодействиях.
Мобильными телефонами пользуются и горизонтально, и вертикально. Держат их, как правило, в одной руке, и касаются экрана одним пальцем. Это означает, что наиболее удобная область взаимодействия — нижняя часть экрана.
4. Ваш код устанавливает правила, поэтому убедитесь, что они верны
Не спрашивайте размер обуви пользователей при первом посещении, если вы не магазин обуви. Даже если вы магазин обуви, сначала покажите информацию о диапазоне размеров и дайте пользователям поиграть с цветами, материалами или областью применения.
Многие приложения запускаются сразу с формой регистрации, и это отсеивает большое количество пользователей. Пусть пользователи попробуют продукт, прежде чем вы запросите номер банковской карты. Не стройте стены. Вы хотите, чтобы люди пользовались тем, что вы создали? Дайте им попробовать.
Убедитесь, что картинки оптимизированы. Проверьте работу на маленькой скорости. Позаботьтесь о тех, кому ценен каждый байт.
5. Сайты с повсеместной анимацией мертвы
Успешный опыт взаимодействия пользователи получают благодаря юзабилити и преимуществам. Это круто — знать CSS, но не добавляйте анимацию, только чтобы показать свой скилл.
Вывод: Хватит вытрепываться, делайте пользователям удобно.
