Особенности мобильных, скетч под винду и стрельба по фичам.
Выпуск 30: голосовое бессилие

Интерфейсы без шелухи

Выпуск 30  •  9 февраля 2017

 КОЛОНКА РЕДАКТОРА
Яндекс «слил» голосовые интерфейсы?

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

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

Но вот что меня огорчает. Есть замечательная компания Яндекс, которая несколько лет назад серьезно озаботилась голосовыми интерфейсами и в 2013 году выпустила движок SpeechKit. Он умеет озвучивать текст, распознавать голос и даже немного понимать смысл сказанного. Это была классная заявка на лидерство по голосовым технологиям в рунете (пока основной конкурент — Гугл — фокусируется на английском). Но с тех пор всё почему-то заглохло. За три года Яндекс не прокачал анализ текста (нужен для «мозгов» голосового помощника), не выпустил свой девайс, не сделал платформу для разработчиков. Не стимулировал разработчиков что-то делать самим на базе движка Яндекса. Даже нормальную функцию голосовой активации не осилил.

Обычно во вступлениях я пишу о том, как надо и как не надо делать. Сегодня получилось только «как не надо». Если меня читает кто-нибудь из Яндекса — расскажите, зачем вы так? Решили «слить» Гуглу и Амазону на самом старте?

— Антон

 ИНТЕРФЕЙСЫ

Особенности проектирования мобильных интерфейсов

Николай Васюнин

В 2016 году Яндекс сделал школу мобильного дизайна и выложил курс видео-лекций на ютуб (не даю ссылку на список видео, потому что тогда вы добавите их в закладки и никогда не посмотрите). Лекция Николая будет кстати, если вы всю дорогу делали интерфейсы для веба и хотите узнать, чего там на смартфонах такого особенного:

  • Человек не может тратить много времени и внимания на решение задачи. Снижайте когнитивную и визуальную нагрузку в интерфейсе.
  • Чтобы не перегрузить пользователя, используйте правило «один экран — один контекст».
  • Операционная среда (айось или андроид) сформировала у пользователя визуальные и моторные привычки, поэтому особенно важно следовать гайдлайнам — это снижает нагрузку на человека. Используйте знакомые значки, привычное расположение элементов и жесты.
  • Люди держат смартфоны по-разному, поэтому единственное надежное положение для основных контролов — центр экрана.

Николай рассказывает живо и с интересными примерами. Рекомендую!

🕑  40 минут (26 минут на скорости ×1,5)

Особенности проектирования мобильных интерфейсов

◇ ◇ ◇
 
 ДИЗАЙН И ВЁРСТКА

От герба до логотипа

Сергей Сухов

Сергей не стал глубоко копать науку о знаках (семиотику), но коротко написал о трех главных классах:

  • Знак-копия (он же иконический знак или пиктограмма)
    Внешне похож на объект, который он обозначает: пешеход на светофоре.
  • Знак-признак (он же индексальный знак или идеограмма)
    Причина для изображаемого объекта: изображение мужчины на двери туалета, потому что туалет для мужчин.
  • Знак-символ
    Обозначает объект по негласному соглашению людей: «пропеллер» для обозначения радиации.

✓ Просто здорово это знать ツ

🕑  5 минут

 

Как подготовить макет для передачи разработчику

Влад Камельский и Алексей Барашков

Влад и Алексей поделились руководством по подготовке дизайн-макетов для передачи в разработку. Ребята сами используют его внутри компании, и это видно — гайдлайн получился подробный, с понятными примерами и без воды. Основные разделы:

  • наименование файлов;
  • оптимизация изображений и подготовка SVG;
  • сетка и поведение элементов при изменении размера экрана;
  • готовые контролы и состояние элементов;
  • шрифт и высота строки;
  • фавиконки;
  • анимация.
Как подготовить макет для передачи разработчику

От меня: рекомендую использовать для фавиконок генератор. Даёте на входе изображение 512×512, получаете все необходимые артефакты для веба и мобильных, складываете на сайт. Вообще не приходится заморачиваться.

✓ Адаптировать для своей специфики и договориться с коллегами, чтобы использовали.

🕑  20 минут

 
Icons8 Lunacy

🔧 Icons8 Lunacy

Невероятно, но ребята из Icons8 сделали это: просмотрщик файлов Скетча под виндоус. В комментариях на Хабре сразу накидали альтернативных вариантов, так что выбирайте по вкусу:

  • Десктопное приложение «Figma» (пока еще бесплатное).
  • Веб-сервис «Sketch Preview».
  • Плагин «Marketch» для экспорта из Скетча сразу в HTML+CSS.

🎯  Телеграм без шелухи

В телеграм-канале «Интерфейсов без шелухи» я каждый день публикую короткое эссе, часто со ссылкой на рекомендуемый материал. Заметки не дублируют рассылку, а дополняют её.

Вот некоторые темы прошлых недель:

  • Правильный размер кнопки на смартфоне.
  • Что дать почитать коллеге, далекому от интерфейсов.
  • Как дела с голосовыми интерфейсами на русском.
  • Тяжелая правда о презентациях.
  • Где вести блог дизайнеру.
Подписаться на канал
 ПРОДУКТОВОДСТВО

Пристрелите фичу

Антон Жиянов

Фич в бэклоге всегда слишком много, а денег и времени — недостаточно. Я выработал для себя несколько правил, как разрешать это трагическое жизненное противоречие. Любимый: снять с забега. Но остальные тоже ничего ツ

✓ В конце статьи план действий, попробуйте применить на ближайших трёх фичах из роадмэпа.

🕑  5 минут

 

Банковский UX с экспертом СМП Банка

Евгений Ефанов и Денис Краснолуцкий

Сегодня в 8 вечера по Москве ребята из AIC и «СМП Банка» проводят вебинар о банковском UX. Обещают рассказать о позиционировании, продвижении и будущем банковских продуктов.

По моему опыту, вебинары у AIC водянистые и затянутые. Но встречаются и полезные куски.


◇ ◇ ◇
 
Вопрос Михаилу Озорнину
 ВОПРОС-ОТВЕТ

Вопрос Михаилу Озорнину

Миша Озорнин проектирует хорошие интерфейсы для корпоративного софта. А еще отвечает на вопросы о дизайне и смежных областях. Не халтурит и не пишет отписки, вместо этого находит исследования, проверяет рекомендации и подбирает примеры.

Чтобы получить совет, пишите Мише на mike.ozornin@gmail.com


◇ ◇ ◇
 
 ДОМАШНЕЕ ЗАДАНИЕ

Переверстка: инструкция голографического стола

Игорь Штанг

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

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

🕑  30 минут на упражнение

👽  Давайте знакомиться?

Меня зовут Антон Жиянов. Я продуктовод. Люблю придумывать интерфейсы, разрабатывать софт и размахивать бритвой Оккама.

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

Спасибо, что читаете!

Понравился выпуск? Подписывайтесь на рассылку

твитнуть
поделиться
Антон Жиянов

По техническим причинам кот нассал вам в капучино.



Email Marketing Powered by Mailchimp