Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Пользовательский интерфейс

Принципы и методы

Элементы

Хотелки и изобретения

Наблюдения

Ещё теги

Позднее Ctrl + ↑

Книга «Пользовательский интерфейс»: готов третий раздел

На прошлой неделе мы открыли оставшийся кусок третьего раздела электронного учебника «Пользовательский интерфейс», но у меня только сейчас дошли руки про это написать тут. Третий раздел называется «Язык», а новые главы — «Слова» и «Язык роботов».

Книга «Пользовательский интерфейс»: готов третий раздел

Вы наверняка слышали о стоп-словах — мусорных словах, которые удаляют или заменяют информативными. Термин появился в бюро, когда мы собирали примеры слов из навигации и интерфейса, которые малоинформативны и даже сигнализируют о проблемах в дизайне. В главе «Слова» приведены примеры стоп-слов, которые встречаются в заголовках экранов, подписях кнопок и меню, текстах сообщений об ошибках. Рядом даны хорошие формулировки — однозначные, информативные и человечные — которые потребуют изменений в интерфейсе.

Это выглядит примерно так:

Глава «Язык роботов» посвящена побочному эффекту технозависимости — машиноподобному языку в интерфейсе:

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

В конце опубликованных глав — интерактивный тест по всему третьему разделу, начиная с глав «Синтаксис», «Элементы управления» и «Пиктограммы»:

У тех, кто оформил предзаказ, время подписки пока не тикает, а первые три раздела уже есть. Если это вы, бегите читать!

2017   книга «Пользовательский интерфейс»   пользовательский интерфейс

Сделать музей интерфейса

Я сейчас пишу книгу об интерфейсе, и мне нужны примеры. Много примеров.

Хорошо, что я уже много лет делаю скриншоты всего подряд — многое удаётся проиллюстрировать примерами из своей коллекции. Но не всегда. Бывает, что мне нужно показать что-то, что лет десять назад было обыденностью, и это не приходило в голову снимать и сохранять. Кому нужен простой скриншот Ворда-95 с парой открытых документов? Оказывается, мне очень нужен.

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

Я давно хочу сделать музей интерфейса: сделать виртуальную машину, установить туда МС-ДОС, и снять там всё золото: Нортон Командер и ДОС-навигатор, Нортон-утилиты, дефрагментатор, Турбо-Паскаль 5.5 и 7.0, другие программы на Турбо-вижене, Лого, Лайнс, классический Тетрис. Потом установить Виндоус 3.1, снять всё в нём. Потом Виндоус-95, потом 98, и так далее.

И ещё одна мысль: поскольку заранее никогда не знаешь, что именно понадобится, думаю, что образы виртуальных машин с разным установленным софтом надо выкладывать вместе со скриншотами.

Руки у меня до этого никогда не дойдут. А вдруг дойдут у вас? Если у вас есть желание позаниматься таким на выходных и потом вместе замутить в интернете музей, давайте дружить. Напишите мне, почта в подвале.

Или, может, такое уже есть, но я не знаю, где искать?

2017   вопрос   пользовательский интерфейс

Дизайн беджа для Сейви

В Сейви 1.3 мы добавили фичу с отображением беджа с количеством неразобранных аудиозаписей:

Дизайн беджа для Сейви

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

Это длинная скучная заметка.

Начиная с 10-го Ай-ОСа, отображение беджа считается «уведомлением», и поэтому требует разрешения пользователя. Так что если бы мы попытались показать бедж, пользователь бы увидел системное окно, спрашивающее, не хочет ли он получать уведомления.

Мы уже просим два разрешения при первом запуске: микрофон и распознавание речи (это разные вещи, к сожалению). Перед тем, как спрашивать, мы показываем такой экран::

Первый запус Сейви

Так мы готовим пользователя к вопросу и увеличиваем шанс того, что он согласится. Микрофон:

Ай-ОС спрашивает про микрофон

Распознавание речи:

Ай-ОС спрашивает про распознавание речи

Заметьте, что тут мы ещё можем добавить отсебятины в текст, чтобы лучше объяснить, почему это окно появилось.

Мы могли бы добавить ещё один объясняющий экран про уведомления: рассказать, что мы будем показывать бедж и только потом спросить разрешения. Но ещё один такой экран и третий вопрос о разрешениях превратит первый запуск программы в пытку. И, что ещё важнее, многие всё равно не согласятся на уведомления, потому что при первом запуске они понятия не имеют, нафиг им этот бедж. Да и вряд ли будут вникать в наши объяснения.

И тогда что дальше, если человек нажмёт Don’t Allow? Разрешения можно спросить только один раз.

Если человек откажет нам в микрофоне или распознавании речи, то всё просто — без них мы вообще не можем ничего делать, поэтому показываем такую заглушку:

Открой настройку

Но с беджем мы так сделать не можем, потому что бедж необязателен. Кому-то нужен, кому-то нет. Так что если человек нажмёт Don’t Allow, нам надо будет где-то объяснить, как включить его позже. А у нас ни эбаута нет, ни настройки.

Можно, конечно, добавить настройку, где будет только этот бедж... В общем, уже получается слишком сложно. И это тупо, ведь в Ай-ОСе уже есть встроенная настройка уведомлений, и мы никаких других «уведомлений» не используем. Поэтому следующая идея была давать это настроить только через системное окно настройки уведомлений:

Настройка Сейви

Если тут включены уведомления, то показываем бедж, если нет, то нет (ну нам и не дадут). А где настроить — объяснили бы в описании приложения.

Так тоже не вышло. Оказалось, что нельзя добавить пункт Notifications в список разрешений приложения, не спросив разрешения сперва. То есть даже чтобы получить ответ «Нет», нужно спросить разрешения! Бесит ещё, что сам текст окна начинается со слов «Sayve Would Like to Send You Notifications», не соответствующих действительности:

Ай-ОС спрашивает про уведомления

На самом деле мы не хотим отправлять никаких уведомлений, у нас их нет. И даже бедж мы не «хотим», а просто можем показывать, если пользователь хочет. Что ещё хуже, именно в этом диалоге, в отличие от двух других, нельзя дописать объясняющей отсебятины.

Но на это всё мы не можем влиять — вопросы задаёт Ай-ОС, а не мы.

Поэтому мы добавили в правый верхний угол иконочку:

Иконка про бедж

Идея была такая: когда человек жмёт, мы сначала спрашиваем, хочет ли человек бедж. И если он говорит, что хочет, мы уже получаем у системы разрешение на уведомления. И потом убираем эту иконку, чтобы не мозолила глаза.

Это, конечно, снова не сработало. Что если пользователь откажется уже в первом окне? Нам придётся не показывать второе, а тогда мы не сможем добавить саму возможность включить уведомления, как я уже объяснял выше. Выходит, нам нельзя спрашивать, хочет ли человек бедж, а нужно просто сказать, мол, «сейчас система спросит про уведомления, а ты ответь, не хочешь ли ты бедж» (жесть).

В итоге в вышедшей недавно 1.3 если нажать в правый верхний угол, вы увидите такое:

Сейви объясняет про бедж

И когда вы нажмёте «OK» (мы его ещё и написали неправильно), тогда уже вы увидите системный диалог про уведомления.

Уже после релиза мы поняли, что лучше было написать что-то вроде Continue вместо «OK», а то кажется, будто мы вынуждаем человека согласиться.

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

Мы — это я и разработчик Сейви — Михаил Рубанов.

Кнопка:

Скачать в Апсторе

2017   дизайн   пользовательский интерфейс   релиз   Сейви

Книга «Пользовательский интерфейс»: часть третьего раздела

На этой неделе мы открыли часть третьего раздела электронного учебника «Пользовательский интерфейс». Третий раздел называется «Язык», а новые главы — «Синтаксис», «Элементы управления» и «Пиктограммы».

Книга «Пользовательский интерфейс»: часть третьего раздела

Мы добрались до темы языка интерфейса, и начинаем с синтаксиса. Это про то, что стандартные элементы — это идеальные члены предложения:

Разбираем синтаксические роли элементов:

Пример синтаксической жопы:

Форма слова влияет на смысл и ожидания пользователя:

Это одна из причин, почему пиктограммы менее выразительны, чем слова. Замочек может значить и «Закрыто» (нужно нажать, чтобы открыть) и «Закрыть».

Любимый разворот про пиктограммы:

У тех, кто оформил предзаказ, время подписки пока не тикает, а первые два и теперь часть третьего раздела уже есть. Если это вы, бегите читать!

2017   Бюро   книга «Пользовательский интерфейс»   пользовательский интерфейс

Классический Мак в браузере

Хотите потыкать в настоящий чёрно-белый Мак в браузере?

Архив.орг теперь даёт это сделать. По ссылке — музей эмуляторов разных классических программ, включающий, например, Мак ОС 6.0.8. Причём это не то, что там кто-то нарисовал 10 экранов и даёт вам между ними переключаться — нет, это прям настоящая операционная система в браузере (до чего техника дошла!).

Сначала сам эмулятор грузится несколько минут. Потом грузится Мак:

Классический Мак в браузере

Добро пожаловать:

Классический Мак в браузере

Рабочий стол!

Классический Мак в браузере

Разрешение экрана — 512 × 342. Скриншоты почему-то мыльные получаются — ну фиг знает.

Можно зайти в яблоко и открыть Эбаут:

Классический Мак в браузере

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

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

Классический Мак в браузере

Я это слизал для иллюстрации на 180-м развороте интерфейсной книги:

Пока кликал, вообще какой-то инсталлятор запустил:

Классический Мак в браузере

Ну, дальше сами.

2017   Мак   пользовательский интерфейс   ссылки

Книга «Пользовательский интерфейс»: готов второй раздел

На прошедшей неделе мы открыли остаток второго раздела электронного учебника «Пользовательский интерфейс» — главы «Обратная связь», «Листание и прокрутка». Теперь первые два раздела доступны целиком.

Книга «Пользовательский интерфейс»: готов второй раздел

Из письма издательства: «Бывало ли у вас такое, что вы приходите в гости, звоните в звонок, но ничего не слышите? Вы звоните ещё раз, но снова тишина. Начинаете стучать в дверь, и тут открывает возмущённый хозяин: „Чё трезвонишь?!“ Проблема в отсутствии обратной связи. Интерфейс дверного звонка прост, а в более сложных интерфейсах вроде управления автомобилем, самолётом или графическим редактором её качество ещё важнее. Из главы вы поймёте, почему руль на автомобиле удобнее, чем стрелки на клавиатуре в автосимуляторах.»

Люблю приводить старые примеры:

И, наоборот, новые:

И снова старые:

И снова новые:

Хотя вроде мода на такую фигню быстро прошла.

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

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

2017   Бюро   книга «Пользовательский интерфейс»   пользовательский интерфейс

Что почитать на выходных — 151

Вот:

  1. A design lesson 3.5 billion years in the making. Костя Горский.
  2. Пара особенностей дизайна схемы метро Екатеринбурга. Паша Омелёхин написал про варежку, глаз, выходы и центр.
  3. Просто ответьте на вопросы. Люда Сарычева объясняет, как написать нормальный текст.
  4. Как работает метафора. Саша Волкова.
  5. Нельзя запрещать открывать ссылку в новой вкладке. Серж Николаев.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

2017   дизайн   Екатеринбург   метро   пользовательский интерфейс   текст   чтиво

Интерфейс Секьюриджа 2.0

Я сделал интерфейс для программы пультовой охраны «Секьюридж». Это программа, в которой операторы пульта смотрят, не пробрался ли кто-то в вашу квартиру, и, если что, отправляют группу быстрого реагирования. Выглядит так (теперь):

Любимый момент был, когда я сидел на пульте и молча наблюдал за работой операторов (потому что пустили только молча), а потом девушки такие: «вы спрашивайте, если что», ну и я стал спрашивать. Там-то как раз и выяснил, почему клавиатура не очень используется. Возможно, если бы не это, я бы не заморочился так с Фиттс-оптимизацией. Уж точно левая панель поиска по номеру объекта бы не была такой.

А ещё когда спрашивал у них, что им больше всего мешает в существующей версии, все говорили: «да вроде ничего, всё нормально». И только на наводящие вопросы и примеры возможных улучшений говорили: «ух ты, а что, так можно»?

Страшно интересный проект. Только на примерах из этого проекта можно учебник по интерфейсу написать. Читайте подробный рассказ.

2017   пользовательский интерфейс   портфолио   работа

Книга «Пользовательский интерфейс»: часть второго раздела

На этой неделе мы открыли часть второго раздела электронного учебника «Пользовательский интерфейс». Второй раздел называется «Взаимодействие», а новые главы — «Близость», «Прицеливание» и «Информативность».

Книга «Пользовательский интерфейс»: часть второго раздела

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

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

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

Ещё привлекаем внимание к мелочам:

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

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

2017   Бюро   книга «Пользовательский интерфейс»   пользовательский интерфейс

Переворот в мобильном интерфейсе

Назрела необходимость переворота в мобильном интерфейсе.

Переворот в мобильном интерфейсе

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

Эплы внедрили два костыля. Один более-менее нормальный: если потащить из-за левого края экрана, перейдёшь на предыдущий экран. Это чтобы не нужно было тянуться к кнопке «Назад». Второй — совсем кривующий: если дважды прикоснуться к главной кнопке, весь экран съезжает вниз, чтобы можно было дотянуться до верхних кнопок.

Спрашивается: нафига ставить кнопки наверх, а потом придумывать костыли, если можно сразу их поставить снизу?

На Виндоус-фонах адресная строка браузера снизу:

Переворот в мобильном интерфейсе

Правда, там непонятно: на половине скриншотов всё-таки сверху. Эпл, когда сделаешь так же?

Интересно, что переворот уже коснулся приложения «Карты». Было-стало:

Переворот в телефонном интерфейсе

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

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

Переворот в мобильном интерфейсе

Сначала управление записью жило наверху (слева). Потом плей переехал вниз (справа).

Но в итоге вообще весь интерфейс стал стремиться к низу:

Переворот в мобильном интерфейсе

В первый момент после переворота результат вам может не понравиться эстетически. Но наши представления о красоте в значительной степени формирует технический прогресс. Вся эволюция представлений о прекрасном имеет объективные причины. Мой любимый пример — рассказ Игоря Штанга о появлении швейцарского стиля в типографике из его курса.

Правило: в мобильных интерфейсах важные элементы управления ставьте вниз.

2017   Айфон   пользовательский интерфейс   студентам
Ранее Ctrl + ↓