Денис Невожай о доме будущего и дизайне интерфейсов для часов.

Старший UX-дизайнер в Essential
http://dnevozhai.com/

— Привет Денис. Чем ты занимаешься в Essential?

UX Design для Home продукта. Если точнее, то работаю над архитектурой и логикой для таких систем как домашняя безопасность, управление IoT устройствами в доме и т.д.

— Почему ты решил заниматься только UX? У тебя же и UI отлично получается)

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

— Как будет работать дом будущего?

Волшебно) Люди не будут думать о том, как включить свет и открыть дверь, когда возвращаются домой. Дом будущего будет достаточно умным, чтобы помогать людям выполнять ежедневные рутины, но при этом не будет назойливым. Взаимодействие между всевозможными объектами будет целостным, работать как единая система, а не как набор из 10 приложений одно из которых IFFFT (если это, тогда то).

— Ты занимался интерфейсами для Alcatel One Touch и Amazfit. Что нужно в первую очередь учитывать, рисуя дизайн для часов?

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

— Как ты проверял свои решения?

На телефоне с маленьким, кругленьким экраном внутри )

— Как делать UI для круглых экранов?

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

— Что смогут делать носимые устройства через 5 лет?

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

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

— Какие устройства станут популярными через 5 лет?

Штука, которая взорвет мир — дополненная реальность. Но это произойдет только когда эти устройства смогут быть достаточно незаметными и не «странными» как Google Glass. Был слух от знакомого, который работает в Magic Leap, о том, что люди на закрытом демо не могли отличить искусственные объекты от реальных. Это впечатляет, обнадеживает и пугает.

— Ты много путешествуешь. Какое место нужно посетить каждому дизайнеру?

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

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

— Apple или Google?

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

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

Тёмные паттерны и просто плохой дизайн:

  1. Важные условия и ограничения написаны мелко и малоконтрастно, чтобы человек не обратил на них внимания.
  2. Тарифам даны эмоциональные названия. Например, тариф «Успех» (подороже) и «Лоукост» (самый дешёвый).
  3. Некоторые важные условия тарифа есть только в огромном документе со всеми условиями. Например, показаны только лимиты, но не показано, что будет после их превышения.
  4. Сломана привычная логика отображения информации. Например, показаны сначала свойства тарифа, а потом стоимость. Или показаны тарифы слева направо от большей стоимости к меньшей.
  5. Общие формулировки и канцеляризмы.
  6. Все тарифы показаны на отдельных страницах без единой сводной таблицы.

Как делать:

  1. Расположите тарифы по возрастанию цены и предложения.
  2. Выделите приоритетный тариф с помощью дизайна.
  3. Дайте сравнить, но не больше 4 тарифов в таблице.
  4. Называйте тарифы осмысленно, без манипуляций и оценок.
  5. Чётко прописывайте 4 главных критерия: абонентскую плату, количество бесплатных платежей, комиссии за снятие и пополнение наличных, лимиты и комиссии на переводы физлицам.
  6. Давайте ссылку на подробное описание тарифов.
  7. Отдельно выносите скидки, они интересны только продвинутым пользователям.
  8. Прописывайте пункты на языке пользователя: вместо «платежи» — «платежи юрлицам и ИП».
  9. Расскажите про превышение лимитов.
  10. Дайте посмотреть цены при ежемесячной оплате и оплате за год вперёд.

https://vc.ru/design/90038

PHP Intl. Правильная транслитерация кириллицы

PHP Intl. Правильная транслитерация кириллицы

Современные фреймворки предоставляют готовый функционал в составе библиотек или хелперов для работы с библиотекой ICU (http://site.icu-project.org/home) через API Intl.

Такой функционал необходим для поддержки интернационализации разрабатываемого веб-сервиса. На основе указанной локали могут устанавливаться форматы отображения валют, времени и даты, а также подбираться настройки для инициализации транслитераторов (https://www.php.net/class.transliterator).

В разделе «Телеграм-каналы (https://chulakov.ru/notes)» сайта Студии во время автоматического импорта постов из наших каналов производится транслитерация названий заметок для формирования ЧПУ (https://ru.wikipedia.org/wiki/%D0%A1%D0%B5%D0%BC%D0%B0%D0%BD%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_URL).

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

Например, уникальная часть URL заметки (https://chulakov.ru/notes/development/php-8-pocti-novogodnij-podarok) про релиз PHP 8 после транслитерации имела вид php-8-pocti-novogodnij-podarok. Замена некоторых букв произошла некорректно.

Для того чтобы транслитерация кириллицы производилась по традиционным правилам, необходимо произвести конфигурацию объекта-транслитератора (https://www.php.net/manual/ru/transliterator.create.php), передав следующее значение параметра $id:

Russian-Latin/BGN; Any-Latin; Latin-ASCII; NFD; [:Nonspacing Mark:] Remove; NFC;

После такой конфигурации результат преобразования наименования заметки изменится на php-8-pochti-novogodniy-podarok.

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

Как подготовить питч вашего стартапа

Как подготовить питч вашего стартапа

Игорь Рябенький, управляющий партнер фонда AltaiR Capital и ангел-инвестор — в том числе в Miro, тогда ещё RealtimeBoard — рассказывает (https://www.facebook.com/1100761030/posts/10217324472199396/?d=n): как подготовить питч вашего стартапа.

↓ ↓ ↓

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

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

Ниже несколько простых правил, которые помогут вам составить грамотный питч и «зацепить» инвестора.

Первый вид питчей – Elevator pitch, так называемая «презентация в лифте», которая 30 секунд рассказывает о вас самую суть.

На примере фонда AltaIR Capital я покажу, как выглядит мой Elevator pitch:

«Я хочу привлечь деньги в фонд, потому что AltaIR – ведущий игрок на рынке ранних инвестиций в стартапы, который способен приносить своим инвесторам десятки процентов годовых и больше. Для того, чтобы участвовать в крутых раундах лучших проектов, я хочу поднять фонд на 300 млн. долларов».

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

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

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

1. Мой стартап решает вот такую проблему

2. Эта проблема действительно назрела, и для нее есть огромный рынок

3. Мы собрали команду мечты, которая это сделает

4. У нас обоснованная и понятная бизнес модель с привлекательной юнит экономикой

5. Наш план в течение года иметь 10 млн. пользователей, а через 2 года мы дойдем до 20 млн. долларов чистой выручки

6. У нас есть обоснованные каналы привлечения клиентов, и наше соотношение стоимости привлечения клиента к его жизненному циклу будет 1 к 10

Все! Вот такой питч заинтересует инвестора.

Еще один важный момент. Вы не 100 долларовая бумажка, чтобы нравиться всем, и кроме содержания питча важна его адресность. Я каждый день получаю десятки писем от тех, кто делает массовую рассылку по всем инвесторам или не смотрит, кому отсылает свое предложение. Здесь надо понимать, что холодный питч более-менее профессиональному инвестору имеет очень маленькие шансы на ответ. Если у вас нет рекомендации, пробиться будет очень тяжело, особенно сейчас, во время пандемии. Мы с вами не встретимся, не выпьем кофе, не посмотрим друг другу в глаза. Нет ничего, кроме переписки в почте или мессенджере или сессии в Zoom. Поэтому, если вы заходите с холода, то должны четко понимать, кому вы адресуете свой питч, и подготовить его на отлично. Если вам лень узнать о тех, у кого вы просите денег, почему вы рассчитываете на их внимание?

Кроме, Elevator pitch есть еще pitch deck (слайды для инвестора), и здесь тоже много проблем. Не нужно присылать рекомендации и презентации на 250 слайдов. Я это повторяю во всех школах, акселераторах, и вместе со мной это делают десятки уважаемых людей.

Питч должен выглядеть сжато и понятно.

1. Постарайтесь уложиться в 5 слайдов, максимум 10

2. Меньше картинок, меньше забористых трудночитаемых шрифтов

3. Четко пишите, какую проблему вы решаете

4. Желательно написать, что вы изобрели что-то абсолютно новое или что-то известное сделали лучше. Здесь вы показываете свою команду и как она будет решать эту проблему

5. Четко указывайте, как вы пойдете на рынок и где ваши клиенты

6. Отдельным слайдом дайте бизнес-модель, чтобы инвестор понимал, что вы хотите сделать

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

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

9. Покажите расходы на команду

10. Прикиньте, какие продажи ваш сервис/товар/услуга будут генерировать

11. Добавьте страничку расчета в Excel, которая покажет ваши затраты, сроки выхода в бизнес (первые продажи и unit-экономику) и как вы планируете дальше развиваться. Здесь вы сможете просчитать свои этапы финансирования и донести их до инвестора

12. Выделите один слайд для конкурентов. Необязательно рисовать квадрат и ставить себя в правый угол или писать список ваших функций, в котором у вас есть 128 функций, а у всех остальных по 28. Инвестору важно, что у вас есть одна своя крутая функция, которую вы делаете лучше всех! Если вы пишете, что конкурентов у вас нет, на это 2 причины: вы плохо искали или вы решили не тем заняться.

Если резюмировать, то ваш питч должен быть о том:
- что вы собираетесь делать
- почему ваша команда имеет шансы сделать это хорошо
- почему ваш рынок большой и масштабируемый
- каким образом вы будете его завоевывать
Такой питч стреляет, и после него с вами будут разговаривать.

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

Давайте уже будем присылать нормальные питчи. Тогда мы работать будем меньше.

Адам Сильвер написал о всплывающих подсказках (tooltip).

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

Проблемы:
1. Пользователи не всегда замечают, что подсказки есть.
2. Пользователь должен что-то сделать, чтобы получить подсказку. Плохо, если в ней находятся, например, требования к паролю. Скорее всего, пользователю придётся их посмотреть.
3. Подсказки могут частично закрывать содержимое и элементы интерфейса. Чтобы заполнить поле, пользователю придётся запомнить текст подсказки.
4. Подсказки могут обрезаться на маленьких экранах.
5. Элементом, с которым пользователь взаимодействует для отображения подсказки, может быть иконка без подписи. В этом случае не всегда бывает понятно, как указать на этот элемент при голосовом взаимодействии с интерфейсом. «Нажми на колокол, нажми на уведомления…»
6. Отображение подсказки при наведении курсора — не самый удобный способ взаимодействия: курсора нет на тачскринах, ховер может быть отключен, сложно прицелиться, пользователь может навести курсор случайно, нельзя взаимодействовать с текстом подсказки (например, скопировать).

Решения:
1. Переделайте дизайн. Если для работы с интерфейсом пользователю нужны подсказки, это плохой интерфейс.
2. Подпишите иконки или замените их на текстовые ссылки.
3. Сделайте важные пояснения видимыми по умолчанию.
4. Для подсказок используйте inline toggle, который активируется кликом и не скрывает содержимое с элементами управления.

https://ux.pub/problemy-s-podskazkami-tooltips-kak-ih-razreshit/

Как рассчитать время прочтения статьи

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

Время на чтение статьи рассчитываем так:
Средняя скорость чтения взрослого человека — 1500 знаков в минуту. Если взять количество знаков в статье и поделить на 1500, получим количество минут. Каждая картинка прибавляет к общему времени +0,2 минуты. Округляем до большего целого числа уже после 0,3 включительно. Запас взят, чтобы не сильно обманывать ожидания людей, что читают медленнее среднего.

Например у нас есть статья на 4315 знаков с двумя картинками.

4315/1500 =2,87
2,87+0,2×2 картинки = 3,27

Округляем до 3 минут чтения.

Если бы знаков было 4 350, то мы бы получили 4 минуты чтения, округлив 3,3 до 4.