Принцип «Направляй, а не ругайся»
Если клиент совершил ошибку, не стоит на него ругаться. Ошибки совершаются по невнимательности, но когда за них получешь — чувствуешь себя дураком. Никто не любит чувствовать себя дураком.
Если клиент не заполнил поле и жмёт на кнопку «далее» — направьте его: поставьте фокус на это поле, откройте клавиатуру. Можно написать аккуратное «Укажите» под полем ввода. Главное — не скатываться в нахально-безразличное «Обязательно для заполнения». Звучит, будто тётка на почте нахамила.
Ещё хуже, если вы указываете клиенту на ошибку модальным окном. Модальные онка прерывают сценарий и акцентируют на себя внимание. Если подпись об ошибке под полем ввода можно сравнить с деликатным шепотом, то модальное окно — это громкое заявление.
Если клиент совершил ошибку, не стоит на него ругаться. Ошибки совершаются по невнимательности, но когда за них получешь — чувствуешь себя дураком. Никто не любит чувствовать себя дураком.
Если клиент не заполнил поле и жмёт на кнопку «далее» — направьте его: поставьте фокус на это поле, откройте клавиатуру. Можно написать аккуратное «Укажите» под полем ввода. Главное — не скатываться в нахально-безразличное «Обязательно для заполнения». Звучит, будто тётка на почте нахамила.
Ещё хуже, если вы указываете клиенту на ошибку модальным окном. Модальные онка прерывают сценарий и акцентируют на себя внимание. Если подпись об ошибке под полем ввода можно сравнить с деликатным шепотом, то модальное окно — это громкое заявление.
This media is not supported in your browser
VIEW IN TELEGRAM
Принцип «Данные бесценны»
Самое страшное что может сделать сервис — не сохранить результат трудов клиента. Если клиент напечатал сообщение, но страница случайно обновилась и сообщение исчезло — это провал. По этой же причине, сервис должен хранить всё, что клиент в него вбивал: историю поисков, незавершенные сообщения, недооформленные билеты.
В реальности следовать этому принципу невероятно сложно: интернета нет, а клиент закрыл приложение, сервер пока не готов хранить все данные и т.д. Думать в эту сторону нужно всегда.
Туту.ру и молодец и не молодец сразу. Молодец, потому что можно начать добавлять пассажира, а закончить когда-то потом. Не молодец, потому что обязательно надо ввести и имя и фамилию. Почему так — не понятно.
Ещё они молодцы, потому что достаточно аккуратно сообщают, что фамилия обязательна, но не молодцы, потому что мне нужно тянуться к верхней строчке через всю длину своего телефона чтобы начать печатать. Можно ведь сразу было открыть клавиатуру.
Самое страшное что может сделать сервис — не сохранить результат трудов клиента. Если клиент напечатал сообщение, но страница случайно обновилась и сообщение исчезло — это провал. По этой же причине, сервис должен хранить всё, что клиент в него вбивал: историю поисков, незавершенные сообщения, недооформленные билеты.
В реальности следовать этому принципу невероятно сложно: интернета нет, а клиент закрыл приложение, сервер пока не готов хранить все данные и т.д. Думать в эту сторону нужно всегда.
Туту.ру и молодец и не молодец сразу. Молодец, потому что можно начать добавлять пассажира, а закончить когда-то потом. Не молодец, потому что обязательно надо ввести и имя и фамилию. Почему так — не понятно.
Ещё они молодцы, потому что достаточно аккуратно сообщают, что фамилия обязательна, но не молодцы, потому что мне нужно тянуться к верхней строчке через всю длину своего телефона чтобы начать печатать. Можно ведь сразу было открыть клавиатуру.
Этими недугами страдает только приложение для покупки ж/д билетов. Я использовал его, чтобы наглядно показать принципы, о которых хотел рассказать. Уверен, что ребята поправят его и сделают нормально.
Например, в остальных приложениях компании нет прошедших рейсов, а пассажира добавляется автоматически после покупки билета. Зацените как круто ребята сделали работу с пустыми и совпадающими полями на главной. Ни ошибок, ни ворчаний. Наоборот, хочется поиграться. Совсем другое ощущение. Красавцы)
Например, в остальных приложениях компании нет прошедших рейсов, а пассажира добавляется автоматически после покупки билета. Зацените как круто ребята сделали работу с пустыми и совпадающими полями на главной. Ни ошибок, ни ворчаний. Наоборот, хочется поиграться. Совсем другое ощущение. Красавцы)
Бюро Горбунова выравнивает карточки и текст по верхней границе строки. Так заглавная в начале предложения лучше видна и цепляет глаз.
Я делаю наоборот — приспускаю текст чуть ниже скругления, чтобы формы выглядели гармоничнее. Так получается дизайн без засечек.
Такие тонкие моменты и есть почерк дизайнера. По ним можно определить приверженец каких идей был автор.
Я делаю наоборот — приспускаю текст чуть ниже скругления, чтобы формы выглядели гармоничнее. Так получается дизайн без засечек.
Такие тонкие моменты и есть почерк дизайнера. По ним можно определить приверженец каких идей был автор.
Дизайн-печь 🔥 Ваня Емелюшкин
А вам какой вариант больше по душе?
Вот блин, не ту картинку прикрепил, но вы молодцы, итак разобрались) Те, кто отчаяно пытался заметить разницу между первым и вторым вариантом — на общей картинке её не было, простите. Вот нормальная, с разницей.
Осенью выйдет iOS 14. Сейчас самое время начать готовить приложения к обновлению, чтобы часть функций не превратилось в тыкву. Что изменится:
Выбор даты и времени
Во всех местах, где у вас стоит нативный барабан, появится календарик. Календарь больше барабана по размеру и поломает вам вёрстку, если заранее не подготовиться,
Теперь дату мы выбираем на календаре, а время печатаем с клавиатуры. Так куда быстрее и удобнее, чем крутить барабан, тут Эппл молодцы. Кроме того, есть компактный вид, по нажатию на который будет открываться модалка с календарём.
Выбор даты и времени
Во всех местах, где у вас стоит нативный барабан, появится календарик. Календарь больше барабана по размеру и поломает вам вёрстку, если заранее не подготовиться,
Теперь дату мы выбираем на календаре, а время печатаем с клавиатуры. Так куда быстрее и удобнее, чем крутить барабан, тут Эппл молодцы. Кроме того, есть компактный вид, по нажатию на который будет открываться модалка с календарём.
Меню
Меню — это дополнительный компонент, поэтому сломаться у вас ничего не должно. Меню призвано заменить Алерты и Экшн Шиты в навигации, сортировке, дополнительных действиях, уточнениях. Выглядит меню совсем как выпадающее меню на Андроиде.
Меню удобно, потому что находится прямо на месте нажатия на кнопку. Не нужно тянуться и перехватывать телефон для выбора действия, как было раньше.
В меню могут быть иконки, разделители и небольшой заголовок. Скрывается меню по нажатию на область за ним.
Это не значит, что теперь надо каждый Экшин Шит и Алерт менять на меню, они всё ещё полезны. Например, для удаления и сохранения черновиков меню лучше не использовать, т.к. легко нажать кнопку удаления. Подтверждение разрушительных действий лучше ставить подальше от самой кнопки Удалить.
Алерты так же останутся для сообщениях об ошибках системы и неожиданных случаях.
Меню — это дополнительный компонент, поэтому сломаться у вас ничего не должно. Меню призвано заменить Алерты и Экшн Шиты в навигации, сортировке, дополнительных действиях, уточнениях. Выглядит меню совсем как выпадающее меню на Андроиде.
Меню удобно, потому что находится прямо на месте нажатия на кнопку. Не нужно тянуться и перехватывать телефон для выбора действия, как было раньше.
В меню могут быть иконки, разделители и небольшой заголовок. Скрывается меню по нажатию на область за ним.
Это не значит, что теперь надо каждый Экшин Шит и Алерт менять на меню, они всё ещё полезны. Например, для удаления и сохранения черновиков меню лучше не использовать, т.к. легко нажать кнопку удаления. Подтверждение разрушительных действий лучше ставить подальше от самой кнопки Удалить.
Алерты так же останутся для сообщениях об ошибках системы и неожиданных случаях.
Пикер выбора цвета
Я ни разу не работал с таким пикером, поэтому не знаю как его изменение повлияет на существующее приложение. Тем более, я не знаю как пикеры работали раньше.
Дизайн выглядит как пикер на Маке и мне он не удобен. Я привык работать со старыми добрыми окошками цвета Фотошопа и Скетча и выбирать цвет на большой радуге не привык.
Я ни разу не работал с таким пикером, поэтому не знаю как его изменение повлияет на существующее приложение. Тем более, я не знаю как пикеры работали раньше.
Дизайн выглядит как пикер на Маке и мне он не удобен. Я привык работать со старыми добрыми окошками цвета Фотошопа и Скетча и выбирать цвет на большой радуге не привык.
В целом, новвоведения приближают Айфоны, Айпад и Мак друг к другу. Похожий выбор даты и времени, выпадающие меню, один и тот же выбор цвета. Видно, что Эппл сводит дизайн всех платформ к одной. Например, тот же МакОС стал куда более скруглённым и плоским, ближе к иОС.
Полное видео про меню, дата пикеры и выбор цвета. https://developer.apple.com/videos/play/wwdc2020/10205
Изменения:
в MacOS https://www.apple.com/macos/big-sur-preview/
iOS https://www.apple.com/ios/ios-14-preview/
iPadOS https://www.apple.com/ipados/ipados-preview/
watchOS https://www.apple.com/watchos/watchos-preview/
Полное видео про меню, дата пикеры и выбор цвета. https://developer.apple.com/videos/play/wwdc2020/10205
Изменения:
в MacOS https://www.apple.com/macos/big-sur-preview/
iOS https://www.apple.com/ios/ios-14-preview/
iPadOS https://www.apple.com/ipados/ipados-preview/
watchOS https://www.apple.com/watchos/watchos-preview/
Apple Developer
Design with iOS pickers, menus and actions - WWDC20 - Videos - Apple Developer
Create iPhone and iPad apps that look great and help people move quickly and directly to the information they need. Discover how you can...
Forwarded from Поясни за UX
Большинство решили, что UX-дизайн тогглов не очень.
И это правильно!
Мы не говорим о графическом оформлении, размере, визуальном стиле и т.д.
Только о том, как эти тогглы спроектированы.
В целом они ничего: работают, показывают изменение состояния (белый овал с текстом "переплывает" на свободное место).
Но это на английском. А пример этот реальный, с сайта, который поддерживает 16 языков.
Что если интерфейс будет на русском?
1. Пробуем сохранить логику с "переплыванием" овала - тоггл распепячивает так, что он не влезает в экран.
2. Пробуем зафиксировать ширину - вроде ничего, но видели бы вы слово "Включен" на немецком...
Невозможно угадать, какая ширина будет достаточной, чтобы вместить слово на всех языках. Да и вдруг нужно будет использовать другое слово?
Гораздо лучше было бы убрать текст из тоггла вообще.
Можно использовать универсальные иконки. Или не использовать вообще ничего (всем понятных иконок не так уж и много).
Самое важное: название функции (слева от тоггла) должно быть сформулировано так, чтобы понимать что происходит без всяких подсказок.
И это правильно!
Мы не говорим о графическом оформлении, размере, визуальном стиле и т.д.
Только о том, как эти тогглы спроектированы.
В целом они ничего: работают, показывают изменение состояния (белый овал с текстом "переплывает" на свободное место).
Но это на английском. А пример этот реальный, с сайта, который поддерживает 16 языков.
Что если интерфейс будет на русском?
1. Пробуем сохранить логику с "переплыванием" овала - тоггл распепячивает так, что он не влезает в экран.
2. Пробуем зафиксировать ширину - вроде ничего, но видели бы вы слово "Включен" на немецком...
Невозможно угадать, какая ширина будет достаточной, чтобы вместить слово на всех языках. Да и вдруг нужно будет использовать другое слово?
Гораздо лучше было бы убрать текст из тоггла вообще.
Можно использовать универсальные иконки. Или не использовать вообще ничего (всем понятных иконок не так уж и много).
Самое важное: название функции (слева от тоггла) должно быть сформулировано так, чтобы понимать что происходит без всяких подсказок.
Мне понравилось как автор разобрал дизайн тоглла. Каждый день я принимаю решения не задумываясь: привычный глазу интрлиньяж, лейблы слева, кнопка справа и т.д. Все мои решения основаны на опыте и кажутся мне очевидными и не достойными канала. Возможно, я не прав. Хотите знать о моём опыте дизайна мелких штук? Осторожно, будут банальности. Буду рассказывать как сложно читать много текста с центральной выключкой и почему чекбоксы должны быть квадратными.
Рассказывать по базовые компоненты и мелкие решения?
Anonymous Poll
96%
👍 Да, давай!
4%
❌ Нет, спасибо уж.
This media is not supported in your browser
VIEW IN TELEGRAM
Долгая загрузка нормального человека
Приложение Welltory
Не даст скучать
Каждый текст — уникальный и не повторяется в процессе загрузки. Читать его весело и интересно
Динамичная
Видно, что не зависло и что-то делает
Не хватает:
Оценки времени
Предупреждение сколько ждать очень помогло бы оценить ожидание. С другой стороны, если бы я знал, что придётся ждать больше 10 секунд, то ушел бы в инстраграмм и не вернулся. Используйте оценку времени, когда загрузка реально больше 10-20 секунд.
Прогресса
А долго ещё ждать то?
Приложение Welltory
Не даст скучать
Каждый текст — уникальный и не повторяется в процессе загрузки. Читать его весело и интересно
Динамичная
Видно, что не зависло и что-то делает
Не хватает:
Оценки времени
Предупреждение сколько ждать очень помогло бы оценить ожидание. С другой стороны, если бы я знал, что придётся ждать больше 10 секунд, то ушел бы в инстраграмм и не вернулся. Используйте оценку времени, когда загрузка реально больше 10-20 секунд.
Прогресса
А долго ещё ждать то?