Короткая заметка об использовании кнопки «наверх»

1. Кнопку имеет смысл делать на страницах с длинным контентом.
2. Делать кнопку не навязчивой и лучше отображать её в момент когда пользователь начинает прокручивать страницу в обратном направлении.
3. Ранее появление кнопки может мотивировать пользователя отказать от прокрутки страницы. Как сказал автор в заметке «А чего тебе крутить вниз, там ничего интересного, давай-ка вверх»

https://goo.gl/8nRuVo

Гайд, как можно оптимизировать Sketch файл.
Суть - не вставляйте в макет изображения высокого разрешения.

https://goo.gl/UGWJyU

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

Оригинал статьи - 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/

Microsoft представила дизайн систему Fluent Design System. Концепция основывается на использовании света, материалов, движения, масштабирования и глубины. Во многом система похожа на Material Design от Google.

Вернулись к блюрам, прозрачным поверхностям, которые появились в первые в Windows Vista.

Крутое видео о дизайн системе https://youtu.be/vcBGj4R7Fo0

Проектирование голосовых приложений и как они работают.

Перед тем, как давать советы по разработке, автор рассказывает, как работает голосовое управление.

Устройство постоянно слушает пользователя. Если оно услышит команду для активации (это может быть Окей гугл, Алекса или какая либо другая), оно отправляет вопрос пользователя в облако платформы. Используя автоматическое распознание речи (ASR) и понимание естественного языка (NLU) оно преобразует вопрос и отправляет его в поддерживаемое приложение. Приложение обрабатывает полученный запрос и отвечает голосом, или отображает ответ визуально, если есть такая возможность. Всё это происходит в считанные секунды.

Руководство по созданию голосового приложения:

1. Поймите ценность приложения. Чем голосовой интерфейс будет лучше графического? Вот основные причины использования голоса по статистике 2016 года в США. У голосового интерфейса выше юзабилити, не нужно вникать в различные менюшки в приложении. Выше скорость получения результата, удобно использовать когда заняты руки (hands free).
2. Определите стиль общения голосового помощника. Для написания голоса Alexa, Amazon пыталась отразить те атрибуты которые они ценят больше всего. Они сделали голос помощника, умным, сдержанным, но с долей юмора. При ответе на вопрос, помощник может менять тип общения в зависимости от заданого вопроса.
3. Определите возможности голосового приложения. Например, банковское приложение может просто сообщать баланс на вашем счёте, но возможно вы захотите сделать что-то поинтересней.
4. На основе заданных возможностей продумайте сценарии использования с описание проблемных ситуаций. Учитывайте альтернативные формулировки вопросов.
5. Тестирование. Важно перед началом разработки всё протестировать, на этом этапе проще исправить и выявить проблемы. Amazon и Google предоставляет инструменты для проведения голосового тестирования.
6. Начать разработку.

В конце статьи автор приводит ссылки на другие материалы по разработке голосовых интерфейсов.

Статью можно смело сохранить в закладки.

https://goo.gl/lbRBmI

О редизайне эмоджи в новом Android O.
Из плоских эмоджей, в круглые формы с градиентами и ободками.
https://goo.gl/fCFRFv

Framer готовит что-то интересное на 31 мая. По всей видимости можно будет дизайнить и прототипировать внутри одного приложения.

Adobe XD где-то плачет.

https://youtu.be/Nzu7wVe4Qms

Майк Амбиндер, психолог из компании Valve в своей лекции рассказал об интересных аспектах работы человеческого мозга и дал советы по использованию знаний психологии в разработке игр.

https://goo.gl/hwl2Db

Nike показал беговую дорожку с визуализацией результатов http://mashable.com/2017/05/15/nike-led-running-track-is-lit/

Framer показал обещанное обновление. Дизайн и код в одном приложении - https://youtu.be/cvxtlt4p2QY

Adobe XD убежал со слезами в истерике

Исследование: как тип устройства влияет на понимание текста

В 2010 году Альбертский университет обнаружил, что понимание прочитанного текста на смартфоне заметно хуже по сравнению с компьютером.

Спустя шесть лет Nielsen Norman Group провели повторное исследование. Результаты тестов показали, что теперь серьезных отличий в понимании текста при чтении со смартфона или компьютера почти нет.

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

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

Особенно мне кажется такой метод прокрутки чаще используется на ноутбуках. Я часто замечал, что пользователи вместо скролла двумя пальцами по тачпаду, перетаскивают полоску прокрутки курсором.

Перевод исследования - https://goo.gl/xnFJII

#research

Вакансия дизайнера в сервис обучения Английскому - Skyeng.

Задача: развивать главный продукт - веб приложение для занятий английским с преподавателем.

В Офис или удалёнка.

Важна скорость, системное мышление, внимательность к коммуникации и вкус.

Пишите на почту - arcady.chugunov@skyeng.ru
или в Facebook - https://goo.gl/D5rW4A

#вакансия

Если вы уже начали использовать Figma, то я думаю вам будет полезна эта пополняемая коллекция ресурсов -  https://www.figmaresources.com

В 11 часов по МСК начнётся видео трансляция ежегодного Dribbble Meetup из Московского офиса Mailru - http://dribbblemeetup.ru/

В 15:30 МСК выступят ребята из Principle.

Жаль, я в этот раз не смог приехать на событие.

Юрий Ветров написал заметку об основных изменениях дизайна в iOS 11

https://goo.gl/wfYgYW

Большой материал о подходе Jobs To Be Done при создании продукта.

Подход JTBD наиболее эффективен при создании нового продукта и привлечении пользователя в отличии от метода персон (User story). User story хорошо работает когда у вашего продукта уже есть своя аудитория, он позволяет посмотреть на вашего пользователя, но не отвечает на вопрос, почему люди продолжают использовать ваш продукт.

Формула создания User Story:
Как (тип пользователя),
Я хочу (действие/цель),
Чтобы (результат).

Пример из статьи:
Как модница Елена (образ пользователя)
Я хочу купить на сайте новое платье в один клик (действие)
Чтобы больше времени тратить на шопинг, а не оформление заказа (результат).

Формула Job Story:
Когда (описание ситуации),
Я хочу (мотивация),
Чтобы (результат).”

Пример из статьи:  
Когда у меня есть всего 2 минуты, чтобы перекусить между встречами (описание ситуации),
Я хочу съесть что-то, чтобы это было просто, быстро и подняло мой уровень сахара в крови (мотивация),
Чтобы продержаться до обеда и сохранить рабочее настроение (результат).

https://goo.gl/ga1FOO

Apple обновила шрифт San Francisco. Заменив SF UI на SF Pro. developer.apple.com/fonts

В честь вечера пятницы можно немного отдохнуть и посмотреть, как пользователи Reddit соревновались в том, кто придумает самый нефункциональный дизайн для ползунка регулировки громкости.
https://vc.ru/p/dumb-ways-to-change-volume

Avacode запустили в бете конвертор PSD в Sketch.

Попробовал на рабочем файле. Смарт объекты не распознал и слил в один растровый слой, в остальном нормально.

p.s: забавно увидеть, как PSD файл 8 Мб уменьшился до 450 кб.

https://goo.gl/8SKrPI

Вакансия дизайнера в mailru. Подробности по ссылке - https://goo.gl/ooCteo

Интересно ваше мнение. Посты о вакансиях в канале нужны?

#вакансия