8031
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Автор: @astract Поддержать канал https://t.me/duiux/1481
Советы по созданию графиков и диаграмм в Sketch. Используя возможности скетча по созданию адаптивного дизайна можно упростить создание графиков для разных размеров экранов.
http://ivomynttinen.com/blog/designing-data-with-sketch
Небольшое исследование на тему подачи информации в виде карточек или списка, на примерах нескольких сайтов.
Некоторые выводы из статьи. При использовании карточек, пользователи чаще обращаются к меню и больше прокручивают сайт. Преимущество карточек в том, что они привлекают больше внимания пользователей. Списки же более компактны.
http://sketchapp.me/kogda-kartochnyj-interfejs-ne-rabotaet/
Лонгрид о редизайне браузера Chrome в Material design KounterB/redesigning-chrome-desktop-769aeb5ab987#.889d49jaz" rel="nofollow">https://medium.com/@KounterB/redesigning-chrome-desktop-769aeb5ab987#.889d49jaz
Читать полностью…
Юрий Ветров подготовил материал по теме трендов UX в Апреле для UX-matters, но из-за задержек публикации, пост вышел совсем недавно. Но тема, которая в ней поднимается считаю будет актуальна ещё некоторое время. Дизайнер должен понимать куда ему развиваться в будущем.
Он считает, что дизайн агенства и продуктовые команды, должны переходить на дизайн-системы для унификации дизайна. Не стоит зацикливаться на дизайне приложений для веба и мобильных приложений, а стоит взглянуть к примеру на автомобильные интерфейсы, новые платформы для голосовых ассистентов и виртуальные пространства. Алгоритмический дизайн будет развиваться и дизайнеру в будущем нужно будет только описывать логику обработки входящих данных, а умные сервисы будут сами формировать дизайн. Сейчас уже запущен такой сервис The Grid CMS, о нём я писал пост ранее.
http://www.jvetrau.com/trends-2016/
Экран с ошибкой, тот тип экранов, которому нужно уделять так же много внимания, как и другим.
Старайтесь проверять вводимую информацию в полях по мере их ввода, там где это возможно. Сообщения об ошибках должны быть описаны на простом языке, избегайте возможных системных слов с кодом ошибки. Указывайте пользователю на ошибку и не заставляйте его догадываться, где он что-то сделал не так.
https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
Уменьшение когнитивной нагрузки, улучшает пользовательский опыт. Чем меньше пользователь задумывается, как работать с интерфейсом, тем проще ему выполнять свои задачи.
Пользователь использует решение, которое он нашёл быстрее, а не то, которое может выполнять его работу лучше. Поэтому задача дизайнера, создать удобный способ решения задач пользователя и отбросить все лишние действия на время выполнения задачи.
https://www.smashingmagazine.com/2016/09/reducing-cognitive-overload-for-a-better-user-experience/
Fantasy собрали команду для создания автомобильных интерфейсов. Их первый концепт - WeAreFantasy/introducing-fantasy-auto-lab-2b7224db917f#.b14chjws1" rel="nofollow">https://medium.com/@WeAreFantasy/introducing-fantasy-auto-lab-2b7224db917f#.b14chjws1
Читать полностью…
Немного о типографике, а именно об истории и предназначении символов & @ #
Интересные факты. Символ & символизирует соединение букв e и t. Знак # берёт начало из телефонных клавиатуру, как знак числа.
Scribendi/the-history-and-usage-of-common-symbols-8f9eefd8a239#.7bdinyje6" rel="nofollow">https://medium.com/@Scribendi/the-history-and-usage-of-common-symbols-8f9eefd8a239#.7bdinyje6
Четвёртая часть из серии статей от Юры Ветрова про UX стратегию - http://www.jvetrau.com/uxstrategy-4/
Кратко о содержании статьи в посте Facebook - https://www.facebook.com/jvetrau/posts/10154067948593250
Перевод статьи о дизайн системе Pinterest - http://sketchapp.me/redizajn-pinterest-blok-za-blokom/
Читать полностью…
Двенадцать важных метрик в аналитике мобильных приложений на которые стоит обращать внимание, что бы создать успешный продукт http://www.uxmatters.com/mt/archives/2016/08/mobile-app-analytics-the-12-most-important-metrics-to-measure.php
Читать полностью…
В честь пятницы, отвлекусь от дизайна и поделюсь переводом статьи, почему нужно любить свою работу и жизнь, и не надо пытаться разделять эти два понятия. Занимайтесь тем, что приносит вам удовольствие и вы будете любить свое дело и даже понедельники.
Скажу за себя, что я очень люблю свою работу. А вы?
http://sketchapp.me/balans-raboty-i-zhizni-polnaya-chush/
Дизайнер Joe Blau представил своё видение символа, который символизирует контекст, в котором компьютер берёт часть управления на себя. С развитием умных систем, пользователю важно понимать, когда работает машина.
К примеру, символ может быть активен, когда термостат автоматически регулирует температуру в доме на основании вашего прибытия или ухода.
https://blog.joeblau.com/symbol-for-context
Как маленькие детали дизайна, могут улучшить пользовательский опыт в мобильном приложении.
Вот например некоторые из них. Если на запуск приложения требуется время, можно показать пользователю на момент ожидания, красивую splash заставку или прогресс бар. Не стоит забывать про дизайн пустых экранов, показывайте на них нужную в текущий момент информацию. На период загрузки контента, можно использовать превью информации, к примеру как делает Medium во время загрузки изображений в статье (он их блюрит, но мы понимаем, что тут будет картинка). Создавайте анимированный фидбек, но не превращайте приложение в мультфильм.
https://uxplanet.org/little-big-details-for-your-mobile-app-6ec1ca615abc#.uohis7cv5
Старая, но не теряющая актуальность статья, о фундаментальных принципах проектирования интерфейсов http://ashapiro.ru/translations/tog-first-principles/
Читать полностью…
UX matters опубликовали главу из книги Mapping Experiences: A Complete Guide to Creating Value Through Journeys, Blueprints, & Diagrams, by Jim Kalbach от издательства Oreilly.
Experience Map - карта взаимодействий в которой описываются мысли и эмоции пользователя. В главе книги рассказывают о видах таких карт и диаграмм, и зачем они нужны. Приводятся ряд аргументов в пользу их использования в проектах и правилах создания.
http://www.uxmatters.com/mt/archives/2016/09/mapping-experiences.php#top
Tony Gines при создании интерфейсов всегда помнит о своей маме и её особенностях работе в интернете. Учитывая её опыт, он делиться основными принципами при разработке дизайна.
Его мама использует старый браузер для просмотра сайтов, он ей удобен и понятен. Хотя автор не раз пытался обучить её работе с Chrome, но она всё равно возвращалась к привычному для неё браузеру. Помните о поддержке старых браузеров и понимайте, что пользователи при работе с сайтом винят не браузер, а дизайн.
Пользователи не понимают всех возможностей сервиса. Используйте визуальные подсказки, которые будут подсказывать пользователю, как сделать то, что они хотят сделать.
Используйте подписи к иконкам, пустые значки не всегда понятны. О том, что комбинация текста и иконки лучше, говорится уже не в первой статье.
Пользователи не так продвинуты, как вы думаете, и они могут не знать о горячих клавишах.
Не думайте о лишнем количестве кликов. Пусть форма для заполнения будет удобна и понятна на нескольких страницах, чем запутанной на одной.
Помните о лояльных пользователях при редизайне сервиса. Сохраняйте популярные элементы на старых позициях. Не заставляйте пользователей переучиваться работе с новым интерфейсом.
https://byrslf.co/designing-user-interfaces-for-your-mother-dd45ec50f7b0#.dfw53mqt7
С выходом 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
Хочу поделиться методами по созданию цветовой палитры в 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
О зонах размещения большого пальца на экране мобильного устройства.
49% пользователей держит телефон одной рукой, и 75% взаимодействует с ним, большим пальцем.
Учитывая эти знания при проектировании интерфейса, лучше предпочесть нижнюю панель навигации, вместо размещения её сверху. Другие важные элементы управления рекомендуется размещать в центральной или нижней зоне экрана. Так как эти зоны самые доступные для большого пальца.
На изображении слева и справа показаны зоны действий для левшей и правшей соответственно. Изображение по центру показывает пересечение этих зон. Стрелками отображено направление свайп жестов, зачастую пользователи делают свайп от края экрана.
https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
Dark pattern - это пользовательский интерфейс, который заставляет пользователя обманным путём выполнять нужные действия.
В этой небольшой статье говорится, почему их продолжают использовать большие компании и почему нужно хорошенько подумать перед их внедрением.
https://www.fastcodesign.com/3060553/why-dark-patterns-wont-go-away
Интервью с Николаем Бабичем. Николай, пишет отличные статьи про UX и прототипирование для Smashing magazine и своего проекта UX planet. И как оказалось, он не дизайнер, а программист - http://antonz.ru/nick-babich/
Читать полностью…
Дизайнер Саша Бизиков закончил курс лекций Яндекс дизайна и подготовил заметку о том, что узнал из курса. В заметке затронуты такие темы, как разработка идеи, проектирование взаимодействия, создание прототипов, презентация идей и реализация решений.
http://bizikov.ru/posts/yandex-design/
Состоялся релиз умной CMS The Grid. Она может самостоятельно подбирать шаблоны и оформление контента для сайта https://thegrid.io/
#tool
Nick Babich рассказывает о популярных паттернах в мобильной навигации. Приводит плюсы и минусы каждого из них, и дает советы по использованию https://uxplanet.org/basic-patterns-for-mobile-navigation-d12a87686efe
Читать полностью…
Дизайнер Luigi Notaro считает, что в будущей версии для носимых устройств Android Wear 2.0 изменилась цветовая палитра с ярких, на более тёмные тона. По идее это может быть связано с OLED дисплеями, которые могут использоваться в часах и потреблять минимум энергии при отображении темных цветов.
Дополнительно автор приводит советы, по составлению палитры на основе нужного цвета и их использованию.
https://blog.prototypr.io/https-medium-com-luiginotaro-material-design-going-dark-2ae81aa44aa5#.kuc9kyfup
Игорь Штанг написал пост, о правильной компоновке текста. Так как мы читаем слева направо, начиная с левой верхней точки, то этого правила стоит придерживаться и при форматировании текста. И как несоблюдение этих вещей, виляет на наше впечатление.
https://designpub.ru/%D0%BB%D0%B5%D0%B2%D1%8B%D0%B9-%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D0%B8%D0%B9-%D1%83%D0%B3%D0%BE%D0%BB-d6153f5f3a8b
Пополняемая коллекция ссылок для дизайнеров http://www.sansfrancis.co/
#tool
Лаборатория UX исследований Mailru, опубликовала на хабре подробную инструкцию по планированию юзабилити тестирования в двух частях.
В первой части говорится о формулировке целей, выборе метода тестирования и инструментах - https://habrahabr.ru/company/mailru/blog/307556/
Во второй части, описывается составление сценария тестирования, продумывание заданий и вопросов - https://habrahabr.ru/company/mailru/blog/308054/
Отрезвляющая статья о паттернах в интерфейсах https://medium.com/p/patternornotpattern-3793a07000f7
Читать полностью…