Nick Babich рассказывает о популярных паттернах в мобильной навигации. Приводит плюсы и минусы каждого из них, и дает советы по использованию https://uxplanet.org/basic-patterns-for-mobile-navigation-d12a87686efe

Перевод статьи о дизайн системе Pinterest - http://sketchapp.me/redizajn-pinterest-blok-za-blokom/

Состоялся релиз умной CMS The Grid. Она может самостоятельно подбирать шаблоны и оформление контента для сайта https://thegrid.io/

#tool

Четвёртая часть из серии статей от Юры Ветрова про UX стратегию - http://www.jvetrau.com/uxstrategy-4/

Кратко о содержании статьи в посте Facebook - https://www.facebook.com/jvetrau/posts/10154067948593250

Дизайнер Саша Бизиков закончил курс лекций Яндекс дизайна и подготовил заметку о том, что узнал из курса. В заметке затронуты такие темы, как разработка идеи, проектирование взаимодействия, создание прототипов, презентация идей и реализация решений.

http://bizikov.ru/posts/yandex-design/

Немного о типографике, а именно об истории и предназначении символов & @ #

Интересные факты. Символ & символизирует соединение букв e и t. Знак # берёт начало из телефонных клавиатуру, как знак числа.

https://medium.com/@Scribendi/the-history-and-usage-of-common-symbols-8f9eefd8a239#.7bdinyje6

Интервью с Николаем Бабичем. Николай, пишет отличные статьи про UX и прототипирование для Smashing magazine и своего проекта UX planet. И как оказалось, он не дизайнер, а программист - http://antonz.ru/nick-babich/

Fantasy собрали команду для создания автомобильных интерфейсов. Их первый концепт - https://medium.com/@WeAreFantasy/introducing-fantasy-auto-lab-2b7224db917f#.b14chjws1

Dark pattern - это пользовательский интерфейс, который заставляет пользователя обманным путём выполнять нужные действия.

В этой небольшой статье говорится, почему их продолжают использовать большие компании и почему нужно хорошенько подумать перед их внедрением.
https://www.fastcodesign.com/3060553/why-dark-patterns-wont-go-away

Уменьшение когнитивной нагрузки, улучшает пользовательский опыт. Чем меньше пользователь задумывается, как работать с интерфейсом, тем проще ему выполнять свои задачи.

Пользователь использует решение, которое он нашёл быстрее, а не то, которое может выполнять его работу лучше. Поэтому задача дизайнера, создать удобный способ решения задач пользователя и отбросить все лишние действия на время выполнения задачи.

https://www.smashingmagazine.com/2016/09/reducing-cognitive-overload-for-a-better-user-experience/

О зонах размещения большого пальца на экране мобильного устройства.

49% пользователей держит телефон одной рукой, и 75% взаимодействует с ним, большим пальцем.

Учитывая эти знания при проектировании интерфейса, лучше предпочесть нижнюю панель навигации, вместо размещения её сверху. Другие важные элементы управления рекомендуется размещать в центральной или нижней зоне экрана. Так как эти зоны самые доступные для большого пальца.

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

https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/

Экран с ошибкой, тот тип экранов, которому нужно уделять так же много внимания, как и другим.

Старайтесь проверять вводимую информацию в полях по мере их ввода, там где это возможно. Сообщения об ошибках должны быть описаны на простом языке, избегайте возможных системных слов с кодом ошибки. Указывайте пользователю на ошибку и не заставляйте его догадываться, где он что-то сделал не так.

https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/

Хочу поделиться методами по созданию цветовой палитры в Sketch.

1. Простой трюк, как можно быстро собрать свою цветовую палитру для работы в Sketch - https://sketchtricks.com/quickly-create-color-palettes/

2. Отличный плагин Prism, который поможет сформировать вашу цветовую палитру документа и экспортировать её из документа в код при необходимости - http://sketchapp.me/plagin-prism-dlya-sketch/

В дополнении добавлю ещё одну ссылку с общими советами по созданию цветовых схем - http://sketchapp.me/cvet-v-dizajn-sistemax/

На основе первого пункта собрал исходник в формате Sketch 40, в котором вам потребуется задать только три основных цвета. Все оттенки будут сгенерированы на их основе, и вам останется только собрать свою палитру документа. После рекомендую пройтись по ней плагином Prism для удобства работы.

#tool

Юрий Ветров подготовил материал по теме трендов UX в Апреле для UX-matters, но из-за задержек публикации, пост вышел совсем недавно. Но тема, которая в ней поднимается считаю будет актуальна ещё некоторое время. Дизайнер должен понимать куда ему развиваться в будущем.

Он считает, что дизайн агенства и продуктовые команды, должны переходить на дизайн-системы для унификации дизайна. Не стоит зацикливаться на дизайне приложений для веба и мобильных приложений, а стоит взглянуть к примеру на автомобильные интерфейсы, новые платформы для голосовых ассистентов и виртуальные пространства. Алгоритмический дизайн будет развиваться и дизайнеру в будущем нужно будет только описывать логику обработки входящих данных, а умные сервисы будут сами формировать дизайн. Сейчас уже запущен такой сервис The Grid CMS, о нём я писал пост ранее.

http://www.jvetrau.com/trends-2016/

С выходом iOS 10, Apple сделала одновременно шаг вперёд и шаг назад в работе уведомлений, как выразился автор статьи Junjie. Он рассказывает на примере своего приложения, как изменилась работа уведомлений в новой операционной системе.

В iOS 9 уведомдения имели два действия при свайпе справа налево, обратное же направление вызывало открытие приложения и просмотр события. С выходом iOS 10 и поддержке технологии 3D touch (которая доступна с iPhone 6S) у уведомлений появилось четыре действия при сильном нажатии на них. 

Пользователи старших моделей iPhone без 3D touch при свайпе уведомлений видят по-старому два действия, но одно из которых вызывает список действий. Тем самым для пользователей старых устройств, без поддержки данной технологии, появилось одно лишнее действие. Для понимания проблемы предлагаю посмотреть гифки в статье.
https://news.dueapp.com/ios-10-notifications-one-step-forward-one-step-back-fe712469184e#.gdsv7qhfb

Лонгрид о редизайне браузера Chrome в Material design https://medium.com/@KounterB/redesigning-chrome-desktop-769aeb5ab987#.889d49jaz

Tony Gines при создании интерфейсов всегда помнит о своей маме и её особенностях работе в интернете. Учитывая её опыт, он делиться основными принципами при разработке дизайна.

Его мама использует старый браузер для просмотра сайтов, он ей удобен и понятен. Хотя автор не раз пытался обучить её работе с Chrome, но она всё равно возвращалась к привычному для неё браузеру. Помните о поддержке старых браузеров и понимайте, что пользователи при работе с сайтом винят не браузер, а дизайн.

Пользователи не понимают всех возможностей сервиса. Используйте визуальные подсказки, которые будут подсказывать пользователю, как сделать то, что они хотят сделать.

Используйте подписи к иконкам, пустые значки не всегда понятны. О том, что комбинация текста и иконки лучше, говорится уже не в первой статье.

Пользователи не так продвинуты, как вы думаете, и они могут не знать о горячих клавишах.

Не думайте о лишнем количестве кликов. Пусть форма для заполнения будет удобна и понятна на нескольких страницах, чем запутанной на одной.

Помните о лояльных пользователях при редизайне сервиса. Сохраняйте популярные элементы на старых позициях. Не заставляйте пользователей переучиваться работе с новым интерфейсом.
https://byrslf.co/designing-user-interfaces-for-your-mother-dd45ec50f7b0#.dfw53mqt7

Небольшое исследование на тему подачи информации в виде карточек или списка, на примерах нескольких сайтов.

Некоторые выводы из статьи. При использовании карточек, пользователи чаще обращаются к меню и больше прокручивают сайт. Преимущество карточек в том, что они привлекают больше внимания пользователей. Списки же более компактны.
http://sketchapp.me/kogda-kartochnyj-interfejs-ne-rabotaet/