duiux | Art and Photo

Telegram-канал duiux - dui

8162

Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Канал в Дзен — https://dzen.ru/dui Автор: @astract Поддержать канал https://t.me/duiux/1481

Subscribe to a channel

dui

Мнение. Почему новый экран блокировки в iOS 10 стал сложным в понимании его работы. В прошлых версиях iOS экран был прост и удобен в использовании, но сейчас с появлением экрана виджетов слева и вызовом камеры справа использовании экрана блокировки стало неочевидным. Возникло много проблем при большом количестве свайпов. Одна из таких проблем проявляется при входе в режим камеры через свайп влево, но чтобы вернуться обратно на экран блокировки, пользователю требуется уже нажать клавишу Home.

Перевод статьи - http://sketchapp.me/kriticheskij-ux-analiz-ekrana-blokirovki-ios-10/
Оригинал - https://uxdesign.cc/a-critical-analysis-of-the-ios-10-lockscreen-experience-726ddfba3c1a#.48rpyaq3h

Читать полностью…

dui

Об использование жестов в приложениях. С их использованием появляется больше пространства для дизайна, можно создавать меньше кнопок. Для обратной связи очень важно использовании анимаций.

Но есть и минусы. Многие пользователи могут не знать о всех возможностях и их нужно обучать. Хороший пример обучения часто можно встретить в мобильных играх. У жестов нет общего понимания работы и общей согласованности. Например в приложении Apple Mail для iOS свайп влево сначала предлагает пометить письмо, как непрочитанное, а продолжение этого действия, изменяется на удалить. То в Gmail только одно действие - пометить, как прочитанное.

https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/

Читать полностью…

dui

David Mahmarian рассказывает, как он работал в составе команды Google Material Design над созданием интерфейсов для людей c аутизмом и синдромом дефицита внимания. Он поделился информацией о том, как проводились исследования для улучшения опыта взаимодействия в приложении.

Перед началом работы он провёл серию интервью с пользователями и узнал, как они борются с отвлечением внимания на сайтах. Оказалось, что они используют плагин AdBlocker для скрытия отвлекающей информации.

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

dmahmarian/a-summer-designing-for-autism-5859f8096b0b#.a87ftyu28" rel="nofollow">https://medium.com/@dmahmarian/a-summer-designing-for-autism-5859f8096b0b#.a87ftyu28

Читать полностью…

dui

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

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

https://medium.com/intercom-inside/onboarding-never-stops-a9ccfd782ffd#.ghlsdziez

Читать полностью…

dui

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

В конце статьи, автор дает оценку InVision по этим пунктам.

http://www.uxbooth.com/articles/a-usable-guide-to-cognitive-dimensions/

Читать полностью…

dui

Советы по созданию графиков и диаграмм в Sketch. Используя возможности скетча по созданию адаптивного дизайна можно упростить создание графиков для разных размеров экранов.

http://ivomynttinen.com/blog/designing-data-with-sketch

Читать полностью…

dui

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

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

Читать полностью…

dui

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

Читать полностью…

dui

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

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

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

Читать полностью…

dui

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

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

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

Читать полностью…

dui

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

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

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

Читать полностью…

dui

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

Читать полностью…

dui

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

Интересные факты. Символ & символизирует соединение букв 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

Читать полностью…

dui

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

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

Читать полностью…

dui

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

Читать полностью…

dui

Новый интересный инструмент для прототипирования ProtoPie https://www.protopie.io/

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

Подробный обзор с видео в статье designforhuman/goodbye-pixate-hello-protopie-dfba9850b6fd#.hkryndw12" rel="nofollow">https://medium.com/@designforhuman/goodbye-pixate-hello-protopie-dfba9850b6fd#.hkryndw12

#tool

Читать полностью…

dui

Инструмент прототипирования Flinto обновился, подробнее об основных изменениях в блоге http://blog.flinto.com/flinto-2-introducing-the-behavior-designer.html

#tool

Читать полностью…

dui

Инструмент Pixate - всё, к сожалению. http://blog.pixate.com/post/151340396973/winding-down-pixate

Читать полностью…

dui

Сравнительный обзор Figma со Sketch. От себя скажу, что Figma очень не плох в работе и подойдет дизайнерам, которые работают на Windows. Кроссплатформенность и одновременный режим работы с несколькими людьми, как основное преимущество перед Sketch.
mengto/figma-vs-sketch-c01e5e74eddd" rel="nofollow">https://medium.com/@mengto/figma-vs-sketch-c01e5e74eddd

#tool

Читать полностью…

dui

Почему Google в мессенджере Allo, создал великолепный UX с умными ответами, и как они улучшили общение с искусственным интеллектом. Как сказал Jason Cornwell главный проектировщик мессенджера: «Работа дизайнера, как и моя сделать так что бы UI было не нужно. Мы просто добрались до того, где обработка естественного языка и AI очень хороша, что вам не нужно больше создавать UI».
https://uxplanet.org/usability-of-google-allo-an-artifically-intelligent-messaging-app-2256921f2ec2?gi=ba60773421d3#.nnwqqtshp

Читать полностью…

dui

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

Читать полностью…

dui

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

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

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

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

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

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

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

Читать полностью…

dui

С выходом 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

Читать полностью…

dui

Хочу поделиться методами по созданию цветовой палитры в 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

Читать полностью…

dui

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

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

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

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

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

Читать полностью…

dui

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

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

Читать полностью…

dui

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

Читать полностью…

dui

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

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

Читать полностью…

dui

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

#tool

Читать полностью…

dui

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

Читать полностью…
Subscribe to a channel