This media is not supported in your browser
VIEW IN TELEGRAM
Сам айфон нарушает это правило в приложении Файлы, но делает не так критично: по-умолчанию списки раскрыты, нет разделителей. Но всё равно не надо так.
#ux_мелочи
#ux_мелочи
Принцип «Покажи клавиатуру сразу»
Если у вас есть экран, где главное действие — ввести текст — покажите клавиатуру сразу, как человек зашел на экран. Не заставляйте его тянуться к полю ввода. Помогите ему сразу сделать то, ради чего он зашел. Форма комментария — покажите клавиатуру. Ввод кода по смс — покажите клавиатуру. Поиск города в списке — покажите клавиатуру. Регистрация — клавиатуру.
Исключение — экран логина с возможностью зайти через соцсети. Тут как раз ввод текста — не главное. Люди заходят через соцсети и важно, чтобы их фокус внимания не смещали на неудобный им способ входа. Выбор должен быть равнозначный. Если у вас нет альтернативных способов входа — клавиатуру.
Если у вас есть экран, где главное действие — ввести текст — покажите клавиатуру сразу, как человек зашел на экран. Не заставляйте его тянуться к полю ввода. Помогите ему сразу сделать то, ради чего он зашел. Форма комментария — покажите клавиатуру. Ввод кода по смс — покажите клавиатуру. Поиск города в списке — покажите клавиатуру. Регистрация — клавиатуру.
Исключение — экран логина с возможностью зайти через соцсети. Тут как раз ввод текста — не главное. Люди заходят через соцсети и важно, чтобы их фокус внимания не смещали на неудобный им способ входа. Выбор должен быть равнозначный. Если у вас нет альтернативных способов входа — клавиатуру.
Сегодня буду ворчать на приложение для продажи ж/д билетов от Туту.ру. В основном по мелочам, которые не блокирую работу с продуктом, но влияют на ощущения от него. Вышло целых 3 неплохих принципа. Приготовьтесь, будет много. Если вы знаете кого-нибудь оттуда — покажите им, может пригодится.
Принцип «Не давай совершать ошибку»
Если в вашем продукте клиент может совершить ошибку, подумайте как его ограничить, чтобы ошибки не возникло вовсе. Например, в приложении Туту.ру можно выбрать одну и ту же станцию прибытия и отправления. Если бы они исключали совпадение из списка станций прибытия, то такую ошибку было бы невозможно совершить.
Если в вашем продукте клиент может совершить ошибку, подумайте как его ограничить, чтобы ошибки не возникло вовсе. Например, в приложении Туту.ру можно выбрать одну и ту же станцию прибытия и отправления. Если бы они исключали совпадение из списка станций прибытия, то такую ошибку было бы невозможно совершить.
Принцип «Направляй, а не ругайся»
Если клиент совершил ошибку, не стоит на него ругаться. Ошибки совершаются по невнимательности, но когда за них получешь — чувствуешь себя дураком. Никто не любит чувствовать себя дураком.
Если клиент не заполнил поле и жмёт на кнопку «далее» — направьте его: поставьте фокус на это поле, откройте клавиатуру. Можно написать аккуратное «Укажите» под полем ввода. Главное — не скатываться в нахально-безразличное «Обязательно для заполнения». Звучит, будто тётка на почте нахамила.
Ещё хуже, если вы указываете клиенту на ошибку модальным окном. Модальные онка прерывают сценарий и акцентируют на себя внимание. Если подпись об ошибке под полем ввода можно сравнить с деликатным шепотом, то модальное окно — это громкое заявление.
Если клиент совершил ошибку, не стоит на него ругаться. Ошибки совершаются по невнимательности, но когда за них получешь — чувствуешь себя дураком. Никто не любит чувствовать себя дураком.
Если клиент не заполнил поле и жмёт на кнопку «далее» — направьте его: поставьте фокус на это поле, откройте клавиатуру. Можно написать аккуратное «Укажите» под полем ввода. Главное — не скатываться в нахально-безразличное «Обязательно для заполнения». Звучит, будто тётка на почте нахамила.
Ещё хуже, если вы указываете клиенту на ошибку модальным окном. Модальные онка прерывают сценарий и акцентируют на себя внимание. Если подпись об ошибке под полем ввода можно сравнить с деликатным шепотом, то модальное окно — это громкое заявление.
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. Пробуем зафиксировать ширину - вроде ничего, но видели бы вы слово "Включен" на немецком...
Невозможно угадать, какая ширина будет достаточной, чтобы вместить слово на всех языках. Да и вдруг нужно будет использовать другое слово?
Гораздо лучше было бы убрать текст из тоггла вообще.
Можно использовать универсальные иконки. Или не использовать вообще ничего (всем понятных иконок не так уж и много).
Самое важное: название функции (слева от тоггла) должно быть сформулировано так, чтобы понимать что происходит без всяких подсказок.