Меню
Меню — это дополнительный компонент, поэтому сломаться у вас ничего не должно. Меню призвано заменить Алерты и Экшн Шиты в навигации, сортировке, дополнительных действиях, уточнениях. Выглядит меню совсем как выпадающее меню на Андроиде.
Меню удобно, потому что находится прямо на месте нажатия на кнопку. Не нужно тянуться и перехватывать телефон для выбора действия, как было раньше.
В меню могут быть иконки, разделители и небольшой заголовок. Скрывается меню по нажатию на область за ним.
Это не значит, что теперь надо каждый Экшин Шит и Алерт менять на меню, они всё ещё полезны. Например, для удаления и сохранения черновиков меню лучше не использовать, т.к. легко нажать кнопку удаления. Подтверждение разрушительных действий лучше ставить подальше от самой кнопки Удалить.
Алерты так же останутся для сообщениях об ошибках системы и неожиданных случаях.
Меню — это дополнительный компонент, поэтому сломаться у вас ничего не должно. Меню призвано заменить Алерты и Экшн Шиты в навигации, сортировке, дополнительных действиях, уточнениях. Выглядит меню совсем как выпадающее меню на Андроиде.
Меню удобно, потому что находится прямо на месте нажатия на кнопку. Не нужно тянуться и перехватывать телефон для выбора действия, как было раньше.
В меню могут быть иконки, разделители и небольшой заголовок. Скрывается меню по нажатию на область за ним.
Это не значит, что теперь надо каждый Экшин Шит и Алерт менять на меню, они всё ещё полезны. Например, для удаления и сохранения черновиков меню лучше не использовать, т.к. легко нажать кнопку удаления. Подтверждение разрушительных действий лучше ставить подальше от самой кнопки Удалить.
Алерты так же останутся для сообщениях об ошибках системы и неожиданных случаях.
Пикер выбора цвета
Я ни разу не работал с таким пикером, поэтому не знаю как его изменение повлияет на существующее приложение. Тем более, я не знаю как пикеры работали раньше.
Дизайн выглядит как пикер на Маке и мне он не удобен. Я привык работать со старыми добрыми окошками цвета Фотошопа и Скетча и выбирать цвет на большой радуге не привык.
Я ни разу не работал с таким пикером, поэтому не знаю как его изменение повлияет на существующее приложение. Тем более, я не знаю как пикеры работали раньше.
Дизайн выглядит как пикер на Маке и мне он не удобен. Я привык работать со старыми добрыми окошками цвета Фотошопа и Скетча и выбирать цвет на большой радуге не привык.
В целом, новвоведения приближают Айфоны, Айпад и Мак друг к другу. Похожий выбор даты и времени, выпадающие меню, один и тот же выбор цвета. Видно, что Эппл сводит дизайн всех платформ к одной. Например, тот же МакОС стал куда более скруглённым и плоским, ближе к иОС.
Полное видео про меню, дата пикеры и выбор цвета. 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 секунд.
Прогресса
А долго ещё ждать то?
Если ваша загрузка совсем долгая, уводите её в фон и присылайте уведомление когда она закончится. Для телефонов долго — больше минуты, для остальных устройств с возможностью смотреть в несколько окон — больше пяти минут.
Почитайте эти статьи о времени, там больше конкретных советов:
Проектируем время. Как делать правильные загрузки
http://web.archive.org/web/20181225123225/http://pavelmoiseenko.ru/blog/proektiruem-vremya/
Иллюзия времени. Статья про ощущение времени в цифровых продуктах и жизни
https://habr.com/ru/post/269113/
Почитайте эти статьи о времени, там больше конкретных советов:
Проектируем время. Как делать правильные загрузки
http://web.archive.org/web/20181225123225/http://pavelmoiseenko.ru/blog/proektiruem-vremya/
Иллюзия времени. Статья про ощущение времени в цифровых продуктах и жизни
https://habr.com/ru/post/269113/
Хабр
Иллюзия времени
Мой дедушка был часовщиком. Когда я был ребенком, я мог подолгу сидеть возле его большого деревянного стола, наблюдая за тем, как он собирает все эти механизмы, состоящие из десятков мельчайших...
В ВК нельзя выбрать пачку файлов из папки так, чтобы он автоматом понял что это за файл. Т.е. если я хочу прикрепить пачку фотографий и видео в придачу, то мне придётся это делать разными кнопками.
Если в вашем сервисе можно прикреплять разные типы файлов, то сделайте для них одну кнопку и распознавайте файлы по типу. Если люди не понимают что именно можно прикрепить, показывайте подсказку при наведении, сделайте разделение по типам вайлов в кнопке «Ещё». Но не делайте как ВК =)
#ux_мелочи
Если в вашем сервисе можно прикреплять разные типы файлов, то сделайте для них одну кнопку и распознавайте файлы по типу. Если люди не понимают что именно можно прикрепить, показывайте подсказку при наведении, сделайте разделение по типам вайлов в кнопке «Ещё». Но не делайте как ВК =)
#ux_мелочи
Прокачаться в дизайне и помочь животным
Канал «Поясни за UX» запускает дизайн-воркаут. Переводите приюту 200 рублей за участие, выполняете задание, получаете обратную связь от автора канала.
Все деньги пойдут в Питерский приют для животных «Брошенный ангел».
Канал «Поясни за UX» запускает дизайн-воркаут. Переводите приюту 200 рублей за участие, выполняете задание, получаете обратную связь от автора канала.
Все деньги пойдут в Питерский приют для животных «Брошенный ангел».
Forwarded from Поясни за UX
Регистрация на участие в благотворительном дизайн-воркауте заканчивается во вторник (21 июля) в конце дня.
Пока желающих недостаточно для его проведения.
Почему стоит участвовать:
1. Вы потренируетесь проектировать и дизайнить интерфейс.
2. За 2 недели вы сделаете полноценную работу для своего дизайн-портфолио.
3. Ваша работа будет разобрана: что хорошо, что можно улучшить, чему поучиться. У вас будет возможность услышать разборы других работ.
4. Вы поможете бездомным животным.
Условия простые: регистрируетесь → 2 недели выполняете задание → высылаете результат → получаете обратную связь.
Для регистрации пишите @ionnapoleon.
Без вас этот воркаут не состоится! 🤞
Пока желающих недостаточно для его проведения.
Почему стоит участвовать:
1. Вы потренируетесь проектировать и дизайнить интерфейс.
2. За 2 недели вы сделаете полноценную работу для своего дизайн-портфолио.
3. Ваша работа будет разобрана: что хорошо, что можно улучшить, чему поучиться. У вас будет возможность услышать разборы других работ.
4. Вы поможете бездомным животным.
Условия простые: регистрируетесь → 2 недели выполняете задание → высылаете результат → получаете обратную связь.
Для регистрации пишите @ionnapoleon.
Без вас этот воркаут не состоится! 🤞
Telegram
Поясни за UX
ДИЗАЙН-ВОРКАУТ НАЧИНАЕТСЯ
Мальчики и девочки, дизайн воркаут в поддержку фонда помощи животным “Брошенный ангел” объявляется открытым!
Задание:
Спроектируйте интерфейс, помогающий людям, которые нашли или хотят приютить бездомное животное. Интерфейс должен…
Мальчики и девочки, дизайн воркаут в поддержку фонда помощи животным “Брошенный ангел” объявляется открытым!
Задание:
Спроектируйте интерфейс, помогающий людям, которые нашли или хотят приютить бездомное животное. Интерфейс должен…
Подобные воркауты — хороший способ решать проблемы реального мира. На основной работе мы помогаем корпорациям зарабатывать деньги, но при этом мы можем направить свои дизайнерские усилия на решение реальных проблем. Например, в следующий раз можно делать не просто задание, а реальные баннеры, помогающие животным найти свой дом. Если вы хотите больше понимания как дизайнер может помочь спасти мир, попробуйте начать с книги Виктора Папанека «Дизайн для реального мира».
Сергей Король пишет почему её стоит прочитать и я согласен с его словами
http://sergeykorol.ru/blog/design-for-the-real-world/
Сергей Король пишет почему её стоит прочитать и я согласен с его словами
http://sergeykorol.ru/blog/design-for-the-real-world/
Блог Сергея Короля
«Дизайн для реального мира»
Книга от дизайнера-социалиста, дизайнера-хиппи, дизайнера-бунтаря и дизайнера-рационалиста. И все эти четыре человека уживаются в одном Викторе Папанеке. Каждая прочитанная книга меняет человека. Вот и после прочтения «Дизайна для реального мира» мое отношение…
Как писать сообщения об ошибках
Есть простой шаблон:
В заголовок — что призошло
Основным текстом — причина и что делать дальше
Кнопкой — действия
Код ошибки, если необходим
Заголовок должен быть понятным и человечным. Задача — сразу сообщить, что ключевое действие не было выполнено. Люди читают заголовок первым и он сразу должен объяснить что произошло.
Если пользователь отправлял письмо, а оно не отправилось, то так и пишем: Письмо не отправлено
Хорошо:
✅ Не удалось загрузить сообщения
✅ Фотографии не отправлены
✅ Платёж не прошел
Плохо:
❌ Что-то пошло не так
❌ Ошибка!
❌ Память не может быть read
Основной текст должен объяснять причину и писать что делать дальше. Ориентируйтесь на ваших пользователей и место возникновения ошибки. Если вашим продуктом пользуются люди, не связанные с IT, то старайтесь избегать таких словечек, как данные, сервер, запрос. Обычно, человек поймёт это либо неверно, либо не поймёт вовсе. Если у вас профессиональный инструмент, то пишите профессиональным языком. В этом случае, конкретика поможет разобраться в ошибке. Хорошо, если вы сможете написать что делать, чтобы ошибка не возникала.
✅Хорошо для простого человека:
Не удалось сохранить документ. Документ слишком большой. Уменьшите размер документа до 800 символов или разбейте на части.
Разбить на 3 части
Закрыть
✅Хорошо для профессионала.
Не удалось сохранить документ. Размера файла подкачки не хватает для сохранения. Увеличьте размер файла подкачки до 1 ГБ или уменьшите размер вашего документа до 800 символов.
Увеличить файл подкачки
Разбить на 3 части
Закрыть
❌ Плохо:
Не писать причину
Писать профессиональным языком для непрофессионалов
Если причина неизвестна, то можно так и писать: Ошибка произошла по неизвестной причине. Помогите нам разобраться, отправьте отчёт.
Кнопки должны повторять действия, которые вы описали в основном тексте. Не обязательно в основном тексте описывать все кнопки, достаточно описать только предпочтительное действие.
✅Хорошо
Вы ввели неверный пароль слишком часто. Чтобы восстановить пароль, обратитесь в службу поддержки.
Позвонить в службу поддержки
Написать в службу поддержки
Закрыть
❌Плохо:
Вы ввели неверный пароль слишком часто. Чтобы восстановить пароль, обратитесь в службу поддержки.
Закрыть
Пишите код ошибки, если ошибка специфическая, который поможет при общении с техподдержкой. Пишите его либо отдельно, либо в основной текст. Код не должен привлекать много внимания.
Отправляйте отчеты автоматически при возникновении ошибки, если это возможно. Если невозможно — добавьте такую кнопку. Не вставляйте такую возможность везде, оставьте её только для технических ошибок. Если у клиента кончился интернет, отчеты вам не помогут. Так разработчики смогут быстрее узнать, если у них что-то отвалилось и разобраться в причинах возникновения ошибки.
Есть простой шаблон:
В заголовок — что призошло
Основным текстом — причина и что делать дальше
Кнопкой — действия
Код ошибки, если необходим
Заголовок должен быть понятным и человечным. Задача — сразу сообщить, что ключевое действие не было выполнено. Люди читают заголовок первым и он сразу должен объяснить что произошло.
Если пользователь отправлял письмо, а оно не отправилось, то так и пишем: Письмо не отправлено
Хорошо:
✅ Не удалось загрузить сообщения
✅ Фотографии не отправлены
✅ Платёж не прошел
Плохо:
❌ Что-то пошло не так
❌ Ошибка!
❌ Память не может быть read
Основной текст должен объяснять причину и писать что делать дальше. Ориентируйтесь на ваших пользователей и место возникновения ошибки. Если вашим продуктом пользуются люди, не связанные с IT, то старайтесь избегать таких словечек, как данные, сервер, запрос. Обычно, человек поймёт это либо неверно, либо не поймёт вовсе. Если у вас профессиональный инструмент, то пишите профессиональным языком. В этом случае, конкретика поможет разобраться в ошибке. Хорошо, если вы сможете написать что делать, чтобы ошибка не возникала.
✅Хорошо для простого человека:
Не удалось сохранить документ. Документ слишком большой. Уменьшите размер документа до 800 символов или разбейте на части.
Разбить на 3 части
Закрыть
✅Хорошо для профессионала.
Не удалось сохранить документ. Размера файла подкачки не хватает для сохранения. Увеличьте размер файла подкачки до 1 ГБ или уменьшите размер вашего документа до 800 символов.
Увеличить файл подкачки
Разбить на 3 части
Закрыть
❌ Плохо:
Не писать причину
Писать профессиональным языком для непрофессионалов
Если причина неизвестна, то можно так и писать: Ошибка произошла по неизвестной причине. Помогите нам разобраться, отправьте отчёт.
Кнопки должны повторять действия, которые вы описали в основном тексте. Не обязательно в основном тексте описывать все кнопки, достаточно описать только предпочтительное действие.
✅Хорошо
Вы ввели неверный пароль слишком часто. Чтобы восстановить пароль, обратитесь в службу поддержки.
Позвонить в службу поддержки
Написать в службу поддержки
Закрыть
❌Плохо:
Вы ввели неверный пароль слишком часто. Чтобы восстановить пароль, обратитесь в службу поддержки.
Закрыть
Пишите код ошибки, если ошибка специфическая, который поможет при общении с техподдержкой. Пишите его либо отдельно, либо в основной текст. Код не должен привлекать много внимания.
Отправляйте отчеты автоматически при возникновении ошибки, если это возможно. Если невозможно — добавьте такую кнопку. Не вставляйте такую возможность везде, оставьте её только для технических ошибок. Если у клиента кончился интернет, отчеты вам не помогут. Так разработчики смогут быстрее узнать, если у них что-то отвалилось и разобраться в причинах возникновения ошибки.
Розыгрыш лицензии Protopie
Мой друг, Еврений, разыгрывает лицензию на своём канале. Он выиграл её на официальном конкурсе на Dribbble и теперь разыгрывает среди подписчиков.
Мой друг, Еврений, разыгрывает лицензию на своём канале. Он выиграл её на официальном конкурсе на Dribbble и теперь разыгрывает среди подписчиков.
Forwarded from ProtoPie 🍰
Значит, раз я выиграл годовую командную лицензию - я её разыграю тут в качестве главного приза =)
Обладатель командной лицензии получает доступ к функционалу интерактивных рецептов в Protopie, и еще многим фичам, типа комментирования прототипов, командным библиотекам, и т.п.
Также ребята из команды Protopie дали мне 3 ключа обычной лицензии на 3 месяца - это будут утешительные призы.
В качестве конкурсной работы, предлагаю сделать вам прототип мобильного каталога товаров с категориями (товары и категории - любые)
Оценивать буду по следующим критериям:
1. UX - удобно ли пользоваться каталогом
2. Новизна/оригинальность решения.
3. High-fidelity - похож ли прототип на реальное приложение
Итоги конкурса - 10 августа.
Присылайте результат мне в личку,
Для людей, у кого уже есть лицензия - призов у меня нет, но можно поучаствовать в конкурсе и занять место на пьедестале в отдельной номинации)
Обладатель командной лицензии получает доступ к функционалу интерактивных рецептов в Protopie, и еще многим фичам, типа комментирования прототипов, командным библиотекам, и т.п.
Также ребята из команды Protopie дали мне 3 ключа обычной лицензии на 3 месяца - это будут утешительные призы.
В качестве конкурсной работы, предлагаю сделать вам прототип мобильного каталога товаров с категориями (товары и категории - любые)
Оценивать буду по следующим критериям:
1. UX - удобно ли пользоваться каталогом
2. Новизна/оригинальность решения.
3. High-fidelity - похож ли прототип на реальное приложение
Итоги конкурса - 10 августа.
Присылайте результат мне в личку,
Для людей, у кого уже есть лицензия - призов у меня нет, но можно поучаствовать в конкурсе и занять место на пьедестале в отдельной номинации)