8031
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Автор: @astract Поддержать канал https://t.me/duiux/1481
Вредные советы, как испортить работу с сайтом для мобильных пользователей.
Не задумывайтесь о скорости загрузки сайта, ведь у всех есть быстрый интернет. Создавайте такую карусель когда виден только один слайд, пользователь обязательно посмотрит есть ли там другие слайды. Не забывайте про гамбургер меню и используйте его чаще. Делайте маленькие элементы для нажатий пальцем и создавайте больше возможностей по работе с жестами. Иногда можно пропустить продумывание дизайна для мелких экранов и проигнорировать момент переключения с портретной ориентации на альбомную.
Конечно, всё что описано выше и многое другое в статье - плохо. К каждой проблеме, автор приводит советы по её решению.
https://www.smashingmagazine.com/2016/10/how-to-poison-the-mobile-user/
Кирилл в своём канале @mosinkru опубликовал схему о различиях между продуктовым, UX и UI дизайнером.
Читать полностью…
Apple добавили гайдлайны по Touch Bar, который появился в новом MacBook Pro презентация, которого прошла вчера (27 октября).
Рекомендации по дизайну:
— Отображайте на экране релевантную информацию для отдельного приложения.
— TouchBar, как дополнение к клавиатуре и трекпаду, это не второй монитор. Избегайте появлениия алертов, сообщений и статичного контента на нём.
— Клавиши Touch Bar не должны отличаться от физических по размеру или цвету.
— Не затачивайте управление только под Touch Bar. Предоставляйте способы для выполнения задач с помощью клавиатуры и трекпада.
— Обеспечивайте быстрый доступ к тем действиям, которые требуют больше шагов для выполнения из меню.
— Пользователь должен получать немедленный фидбек от взаимодействия с панелью.
— Если выполнение задачи началось с использованием Touch Bar, на нём оно должно и закончиться. Не заставляйте пользователя переключаться между клавиатурой и сенсорной панелью.
— Избегайте использования известных сочетаний клавиш на Touch Bar.
— Если кнопка неактивна на экране, она должна быть неактивна и на сенсорной панели.
— Дополнительные опции при взаимодействии, должны отображаться только на Touch Bar, а не дублироваться на мониторе.
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/AbouttheTouchBar.html#//apple_ref/doc/uid/20000957-CH104-SW1
Гайдлайны Material design переехали на новый домен - https://material.io/
Что именно изменилось
https://design.google.com/articles/design-is-never-done/
Старая статья о том, почему важно создавать интерфейс под конкретную платформу, и не пытаться просто умещать множество элементов на мобильном экране. Каждое устройство - это определенный контекст. Сидя за столом с ноутбуком мы можем без проблем работать с несколькими задачами. При использовании планшета, нам приходится следить за тем, что бы не уронить устройство, со смартфоном все ещё сложней, мы им пользуемся на ходу.
В статье так же говорится почему сайты лучше для декстопов, а для мобильных платформ лучше приложения.
kovchiy/-c36cea14c65c#.yk5adt54l" rel="nofollow">https://medium.com/@kovchiy/-c36cea14c65c#.yk5adt54l
В рамках проекта «Мобилизация», Яндекс на своём YouTube канале запустил бесплатные видеокурсы для дизайнеров интерфейсов, android и фронтенд разработчиков.
Вторник - лекции для дизайнеров
Среда - Android разработка
Четверг - Фронтенд разработка
https://vc.ru/p/yandex-video-edu
Ринат Шайхутдинов разработал приложение для iOS с переводом карточек в которых собраны основные принципы удержания внимания, восприятия, запоминания, мотивации, понимания и убеждения. Автор оригинальной коллекции карточек Stephen Anderson (автор книги Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences).
На каждой карточке представлен один принцип человеческого поведения и способы его применения в разработке проектов. По ссылке краткое описание каждой карточки и есть возможность заказа бумажной версии набора.
https://medium.com/mental-notes/7bbb96465500#.7j97tb8ac
#tool
Соседний канал «почитать о дизайне» @mosinkru опубликовал интересную ссылку на статью, что быстрая реакция обработки запросов в приложениях не всегда хорошо. Пользователи не в каждой ситуации доверяют быстрым ответам. Поэтому иногда приложения специально замедляет отклик и выводит результат с небольшой задержкой. У этого приема есть название «искусственные задержка». https://www.fastcodesign.com/3061519/evidence/the-ux-secret-that-will-ruin-apps-for-you
Читать полностью…
Яндекс рассказывает, как они делали редизайн главной страницы Яндекс денег. Приводят примеры разных вариантов дизайна и описывают, насколько они были эффективны https://habrahabr.ru/company/yandex/blog/311956/
Читать полностью…
В далёком 1987 году компания Apple представила Macintosh 2 и свою книгу с основными принципами взаимодействия - Human Interface Guidelines. Примечательно, что в 80-х, когда компьютеры только зарождались, компания представила принципы, которые используются в проектировании интерфейсов до сих пор.
В ней описываются такие понятия, как consistency (использования типовых для конкретной платформы рекомендаций) , feedback (информирование о выполнение операции) и обеспечение нужной информацией в нужное время.
https://blog.prototypr.io/rediscovering-apples-human-interface-guidelines-1987-59731376b39e#.ow0rn7r45
Мнение. Почему новый экран блокировки в 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
Об использование жестов в приложениях. С их использованием появляется больше пространства для дизайна, можно создавать меньше кнопок. Для обратной связи очень важно использовании анимаций.
Но есть и минусы. Многие пользователи могут не знать о всех возможностях и их нужно обучать. Хороший пример обучения часто можно встретить в мобильных играх. У жестов нет общего понимания работы и общей согласованности. Например в приложении Apple Mail для iOS свайп влево сначала предлагает пометить письмо, как непрочитанное, а продолжение этого действия, изменяется на удалить. То в Gmail только одно действие - пометить, как прочитанное.
https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
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
Обучение пользователей работе с приложением никогда не должно останавливаться, так звучит заголовок новой статьи от Intercom.
Пользователей нужно обучать новым фишкам прямо в контексте задачи. Хорошей практикой обучения служит использование примеров, например как это делает Trello после регистрации нового пользователя. Пользователь при первом входе видит предварительно подготовленные доски с описанием взаимодействий и возможностей сервиса. Не нужно сваливать все функции на пользователя сразу, подавайте их маленькими порциями.
https://medium.com/intercom-inside/onboarding-never-stops-a9ccfd782ffd#.ghlsdziez
14 измерений когнитивных процессов при работе с интерфейсом и как это важно для улучшения юзабилити продукта.
В конце статьи, автор дает оценку InVision по этим пунктам.
http://www.uxbooth.com/articles/a-usable-guide-to-cognitive-dimensions/
Памятка по основным элементам интерфейса. Как называется и зачем нужен.
https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
Facebook обновили инструмент для создания прототипов Origami - http://origami.design/
#tool
Anton Guk собрал руководство по основам цвета и составлению цветовых палитр на основе различных статей и книги “Искусство цвета” Иоханнеса Иттена.
В статье он рассказывает о теории цвета, цветовых моделях, психологии цвета и методах составления палитр.
https://goo.gl/wxWOum
Руководство Google по проведению дизайн спринтов. Дизайн-спринт - решение и тестирование задач по дизайну за два-пять дней. Идеальная команда состоит из нескольких человек и включает в себя спринт-мастера, дизайнеров, разработчиков, продукт-менеджеров и экспертов.
Спринт включает шесть этапов:
1. Понимание - что нужно пользователю, какие бизнес-цели стоят и каковы технические возможности?
2. Определение - какова ключевая стратегия, на чем сфокусирован проект?
3. Дивергенция - как мы сможем выработать максимальное количество идей?
4. Принятие решений - выбор наилучших идей.
5. Прототипирование - создание артефакта, который позволяет тестировать идеи пользователями.
6. Валидация - тестирование идей пользователями, инвесторами и техническими экспертами.
http://sketchapp.me/oficialnoe-rukovodstvo-po-google-design-sprint-metodologiya-dizajn-sprintov/#.WA...
Рафаэль Лино из студии Visualise рассказал, почему в виртуальной реальности не действую старые правила по работе с UI, и что учитывать при создании интерфейсов в VR на примере игры Valve «Thе Lab». https://vc.ru/p/the-lab
Читать полностью…
О так называемом паттерне «anticipatory design». Сейчас сервисы могут делать предложения о предпочтениях пользователя на основе его персональных данных, и принимать на основе этого решения. Цель состоит в том, что бы упростить процесс выбора.
Например Spotify на основе музыкальных вкусов генерирует персональный плейлист на неделю. Google Now отображает для вас персональные карточки с полезной для вас информацией.
https://www.smashingmagazine.com/2016/10/how-to-build-honest-uis-and-help-users-make-better-decisions/
Как Google улучшает UX с помощью фреймворка HEART. HEART - это Happiness (удовлетворенность продуктом), Engagement (длительность сессий использования продукта), Adoption (процент пользователей, который остаётся после регистрации), Retention (процент пользователей, который вернулся к использованию приложения) , Task Success (помощь пользователю в выполнении его задач).
http://www.appcues.com/blog/google-improves-user-experience-with-heart-framework/
Кейс от студии Readmadrobot, как они сделали редизайн мобильного приложения Билайн для iOS https://vc.ru/p/redmadrobot-beeline
Читать полностью…
Всё о пользе скетчинга на этапе проектирования. В статье рассказывается какие инструменты и методы применяются и дается ряд полезных советов. https://uxplanet.org/everything-you-need-to-know-about-ux-sketching-4ab8e66902e#.5xi8aykce
Читать полностью…
Новый интересный инструмент для прототипирования 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
Инструмент прототипирования Flinto обновился, подробнее об основных изменениях в блоге http://blog.flinto.com/flinto-2-introducing-the-behavior-designer.html
#tool
Инструмент Pixate - всё, к сожалению. http://blog.pixate.com/post/151340396973/winding-down-pixate
Читать полностью…
Сравнительный обзор Figma со Sketch. От себя скажу, что Figma очень не плох в работе и подойдет дизайнерам, которые работают на Windows. Кроссплатформенность и одновременный режим работы с несколькими людьми, как основное преимущество перед Sketch.
mengto/figma-vs-sketch-c01e5e74eddd" rel="nofollow">https://medium.com/@mengto/figma-vs-sketch-c01e5e74eddd
#tool
Почему Google в мессенджере Allo, создал великолепный UX с умными ответами, и как они улучшили общение с искусственным интеллектом. Как сказал Jason Cornwell главный проектировщик мессенджера: «Работа дизайнера, как и моя сделать так что бы UI было не нужно. Мы просто добрались до того, где обработка естественного языка и AI очень хороша, что вам не нужно больше создавать UI».
https://uxplanet.org/usability-of-google-allo-an-artifically-intelligent-messaging-app-2256921f2ec2?gi=ba60773421d3#.nnwqqtshp