8031
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Автор: @astract Поддержать канал https://t.me/duiux/1481
Утилита удаляет кэш истории сохранений скетч файла. Решает проблему, что Sketch со временем съедает много лишних гигабайт.
https://goo.gl/FXE8zx
#sketch
Новый инструмент контроля версий Sketch файла для удобной работы в команде. В Basic версии бесплатен - https://goo.gl/fs4M8Y
#tool
Не об интерфейсах, но важно знать. Особенно актуально для сервисов, которые хранят персональные данные пользователей.
Как возможно вы уже знаете с 1 июля в РФ вступил закон о хранении персональных данных. По ссылке все подробно и простым языком, что нужно делать и для кого это важно.
https://goo.gl/zdrg8d
В дизайне существует целый набор принципов восприятия. Многие знают принцип близости, но он хорошо работает с однотипными объектами и ломается в куче различных объектов.
Женя Арутюнов пересказал статью профессора Деяна Тодоровича, «Принципы гештальта» о разных принципах восприятия и дополнил комментариями.
Статью сложно пересказать без иллюстраций, поэтому рекомендую прочитать её.
Принципы восприятия:
- Разделение на фигуру и фон
- Близость
- Синхронность
- Подобие
- Непрерывность
- Завершённость
- Камуфляж
- Хороший гештальт
- Опыт восприятия
https://goo.gl/yijP3k
В связи со очередными слухами о блокировке Telegram. Хотя я мыслю позитивно и думаю это не случится. На всякий случай завёл зеркала этого канала в других местах.
Вконтакте - https://goo.gl/0X73GV
Фейсбук - https://goo.gl/5oYLu5
ICQ - https://goo.gl/4N5r2z
Твиттер - https://goo.gl/Xke3L4
ТамТам (а вдруг?) - https://goo.gl/itqFav
Вакансия дизайнера в mailru. Подробности по ссылке - https://goo.gl/ooCteo
Интересно ваше мнение. Посты о вакансиях в канале нужны?
#вакансия
В честь вечера пятницы можно немного отдохнуть и посмотреть, как пользователи Reddit соревновались в том, кто придумает самый нефункциональный дизайн для ползунка регулировки громкости.
https://vc.ru/p/dumb-ways-to-change-volume
Большой материал о подходе Jobs To Be Done при создании продукта.
Подход JTBD наиболее эффективен при создании нового продукта и привлечении пользователя в отличии от метода персон (User story). User story хорошо работает когда у вашего продукта уже есть своя аудитория, он позволяет посмотреть на вашего пользователя, но не отвечает на вопрос, почему люди продолжают использовать ваш продукт.
Формула создания User Story:
Как (тип пользователя),
Я хочу (действие/цель),
Чтобы (результат).
Пример из статьи:
Как модница Елена (образ пользователя)
Я хочу купить на сайте новое платье в один клик (действие)
Чтобы больше времени тратить на шопинг, а не оформление заказа (результат).
Формула Job Story:
Когда (описание ситуации),
Я хочу (мотивация),
Чтобы (результат).”
Пример из статьи:
Когда у меня есть всего 2 минуты, чтобы перекусить между встречами (описание ситуации),
Я хочу съесть что-то, чтобы это было просто, быстро и подняло мой уровень сахара в крови (мотивация),
Чтобы продержаться до обеда и сохранить рабочее настроение (результат).
https://goo.gl/ga1FOO
В 11 часов по МСК начнётся видео трансляция ежегодного Dribbble Meetup из Московского офиса Mailru - http://dribbblemeetup.ru/
В 15:30 МСК выступят ребята из Principle.
Жаль, я в этот раз не смог приехать на событие.
Вакансия дизайнера в сервис обучения Английскому - Skyeng.
Задача: развивать главный продукт - веб приложение для занятий английским с преподавателем.
В Офис или удалёнка.
Важна скорость, системное мышление, внимательность к коммуникации и вкус.
Пишите на почту - arcady.chugunov@skyeng.ru
или в Facebook - https://goo.gl/D5rW4A
#вакансия
Framer показал обещанное обновление. Дизайн и код в одном приложении - https://youtu.be/cvxtlt4p2QY
Adobe XD убежал со слезами в истерике
Майк Амбиндер, психолог из компании Valve в своей лекции рассказал об интересных аспектах работы человеческого мозга и дал советы по использованию знаний психологии в разработке игр.
https://goo.gl/hwl2Db
О редизайне эмоджи в новом Android O.
Из плоских эмоджей, в круглые формы с градиентами и ободками.
https://goo.gl/fCFRFv
Microsoft представила дизайн систему Fluent Design System. Концепция основывается на использовании света, материалов, движения, масштабирования и глубины. Во многом система похожа на Material Design от Google.
Вернулись к блюрам, прозрачным поверхностям, которые появились в первые в Windows Vista.
Крутое видео о дизайн системе https://youtu.be/vcBGj4R7Fo0
Гайд, как можно оптимизировать Sketch файл.
Суть - не вставляйте в макет изображения высокого разрешения.
https://goo.gl/UGWJyU
Перевод статьи Tidjane Tall, как быстро и просто создать ряд базовых иконок. Например, как получить в одной действие из квадрата значок стрелки.
https://goo.gl/eGfYUT
Портальная дизайн команда MailRu Group представила свою дизайн систему - Paradigm.
Цитирую, как понимает систему дизайн команда портала:
- Визуальный язык — определяет то, как мы создаём интерфейсы продуктов.
- Единые компоненты на технологическом уровне. Дизайн «вшит» в них, сервисы получают и обновляют их из единого репозитория.
- Шаблоны для дизайнерских инструментов - способ быстро показать идею, просто высокоуровневые скетчи.
В статье на хабре описаны основные принципы и приведены примеры использования системы - https://goo.gl/Hg9RcV
Михаил Капанага поделился хинтом, как быстро определять расстояние от заголовка до следующего за ним текста. О хинте он узнал с курсов по типографике, которые ведёт Игорь Штанг.
1. Поставить заголовок в две строки
2. Настроить интерлиньяж заголовка
3. Выравнять текст параграфа по базовой линии второй строки заголовка.
4. Возвращаем заголовок в одну строку.
Но данный метод работает не всегда. В случае когда заголовок гораздо больше обычного текста, текст стоит выравнивать по верхней линии строчных букв.
https://goo.gl/fmWfuV
Дизайнер может создать - аналитик проверить.
Знание базовых показателей по аудитории, статистике кликов по разделам, формирование гипотез без подкрепления их верными данными несут мало пользы для дизайнера. Особенно если он работает один.
Наилучший метод для работы - когда дизайнер и аналитик работают бок о бок. Дизайнер создаёт пользовательские сценарии, а аналитик проверяет их данными, и они вместе думают на одной задачей.
Хороший вопрос для создания сценариев: "откуда пользователи приходят, и куда уходят?". Понимание этого вопроса, поможет понять, как ведёт себя пользователь.
Найдя ответ на эти вопросы, важно выявить:
1. Популярные сценарии и попытаться улучшить их показатели даже на минимальный процент. Это будет даже лучше, чем увеличить на больший процент редкий сценарий.
2. Разобраться, почему самые конвертируемые сценарии так эффективны, можно попробовать улучшить и их, но главное ничего не сломать.
3. Очень хорошо, если во время работы получится выявить инсайты. Инсайт - неочевидная правда о пользователе.
https://goo.gl/JUbVDz
Илья Бирман рассказывает, как сделать слайдер с хорошей обратной связью и соблюдением закона Фиттса.
Суть. Добавляйте ховер на слайдер, что бы пользователь понимал, что он может работать с ним. Увеличивайте зону взаимодействия, не заставляйте пользователя целиться в маленькую полоску слайдера. Синхронизируйте значение слайдера и ползунок регулировки во время его использования.
В конце статьи есть примеры хороших слайдеров.
https://goo.gl/MJV7ux
Avacode запустили в бете конвертор PSD в Sketch.
Попробовал на рабочем файле. Смарт объекты не распознал и слил в один растровый слой, в остальном нормально.
p.s: забавно увидеть, как PSD файл 8 Мб уменьшился до 450 кб.
https://goo.gl/8SKrPI
Apple обновила шрифт San Francisco. Заменив SF UI на SF Pro. developer.apple.com/fonts
Читать полностью…
Юрий Ветров написал заметку об основных изменениях дизайна в iOS 11
https://goo.gl/wfYgYW
Если вы уже начали использовать Figma, то я думаю вам будет полезна эта пополняемая коллекция ресурсов - https://www.figmaresources.com
Читать полностью…
Исследование: как тип устройства влияет на понимание текста
В 2010 году Альбертский университет обнаружил, что понимание прочитанного текста на смартфоне заметно хуже по сравнению с компьютером.
Спустя шесть лет Nielsen Norman Group провели повторное исследование. Результаты тестов показали, что теперь серьезных отличий в понимании текста при чтении со смартфона или компьютера почти нет.
Скорость чтения сложных статей на мобильном ниже, но это почти не влияет на понимание текста. Хотя пользователям и приходится чаще перечитывать информацию для её лучшего усвоения.
При проведение тестов, пользователи высказались, что им комфортней читать статьи именно на мобильном устройстве, так как прокрутка с помощью большого пальца проще, чем нажатие на полоску прокрутки. До сих пор многие пользователи избегают прокручивание колёсиком мышки.
Особенно мне кажется такой метод прокрутки чаще используется на ноутбуках. Я часто замечал, что пользователи вместо скролла двумя пальцами по тачпаду, перетаскивают полоску прокрутки курсором.
Перевод исследования - https://goo.gl/xnFJII
#research
Nike показал беговую дорожку с визуализацией результатов http://mashable.com/2017/05/15/nike-led-running-track-is-lit/
Читать полностью…
Framer готовит что-то интересное на 31 мая. По всей видимости можно будет дизайнить и прототипировать внутри одного приложения.
Adobe XD где-то плачет.
https://youtu.be/Nzu7wVe4Qms
Проектирование голосовых приложений и как они работают.
Перед тем, как давать советы по разработке, автор рассказывает, как работает голосовое управление.
Устройство постоянно слушает пользователя. Если оно услышит команду для активации (это может быть Окей гугл, Алекса или какая либо другая), оно отправляет вопрос пользователя в облако платформы. Используя автоматическое распознание речи (ASR) и понимание естественного языка (NLU) оно преобразует вопрос и отправляет его в поддерживаемое приложение. Приложение обрабатывает полученный запрос и отвечает голосом, или отображает ответ визуально, если есть такая возможность. Всё это происходит в считанные секунды.
Руководство по созданию голосового приложения:
1. Поймите ценность приложения. Чем голосовой интерфейс будет лучше графического? Вот основные причины использования голоса по статистике 2016 года в США. У голосового интерфейса выше юзабилити, не нужно вникать в различные менюшки в приложении. Выше скорость получения результата, удобно использовать когда заняты руки (hands free).
2. Определите стиль общения голосового помощника. Для написания голоса Alexa, Amazon пыталась отразить те атрибуты которые они ценят больше всего. Они сделали голос помощника, умным, сдержанным, но с долей юмора. При ответе на вопрос, помощник может менять тип общения в зависимости от заданого вопроса.
3. Определите возможности голосового приложения. Например, банковское приложение может просто сообщать баланс на вашем счёте, но возможно вы захотите сделать что-то поинтересней.
4. На основе заданных возможностей продумайте сценарии использования с описание проблемных ситуаций. Учитывайте альтернативные формулировки вопросов.
5. Тестирование. Важно перед началом разработки всё протестировать, на этом этапе проще исправить и выявить проблемы. Amazon и Google предоставляет инструменты для проведения голосового тестирования.
6. Начать разработку.
В конце статьи автор приводит ссылки на другие материалы по разработке голосовых интерфейсов.
Статью можно смело сохранить в закладки.
https://goo.gl/lbRBmI
Большой материал о принципах анимаций в интерфейсах, которые улучшают взаимодействие с ним. И в чем разница между типами взаимодействий в реальном и нет времени.
Оригинал статьи - https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc?source=linkShare-e35e11283e3f-1494235980
Перевод (но местами из-за перевода терминов он выглядит очень странным) - http://sketchapp.me/udobnyj-interfejs-s-pomoshhyu-dvizheniya-12-principov-ux-animacii/
Короткая заметка об использовании кнопки «наверх»
1. Кнопку имеет смысл делать на страницах с длинным контентом.
2. Делать кнопку не навязчивой и лучше отображать её в момент когда пользователь начинает прокручивать страницу в обратном направлении.
3. Ранее появление кнопки может мотивировать пользователя отказать от прокрутки страницы. Как сказал автор в заметке «А чего тебе крутить вниз, там ничего интересного, давай-ка вверх»
https://goo.gl/8nRuVo