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

РСС — лучше всего

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

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

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

Элементы

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

Наблюдения

Ещё теги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка:

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

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

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

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

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

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

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

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

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

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

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

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

18 июня   Бюро   книга   пользовательский интерфейс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29 апреля   Бюро   книга   пользовательский интерфейс

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

Вот:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерфейс Мимика 2.0

Веб-приложения состоят из фронтенда (того, что работает у пользователя в браузере) и бэкенда (того, что происходит на сервере). Эти части разрабатывают с разной скоростью. Если при создании браузерной части сервер недоступен, разработчик обычно сильно ограничен.

Я сделал интерфейс для второй версии Мимика — инструмента веб-разработчика для имитации ответов сервера. Можно работать, как будто сервер доступен. Настроить поддельный ответ («мок») очень легко. Например, вы хотите сделать вид, что сервер ответил строчкой джейсона:

Можно настроить навороченные моки, с хитрыми ХТТП-заголовками, задержкой и чем угодно ещё:

Кайф Мимика в том, что не нужно даже поднимать локальный сервер или менять урлы в своём приложении. Он работает прямо с тем, что есть, прямо в браузере. Но даже расширения браузера не нужно, он подключается просто как скрипт к приложению.

Подробнее об интерфейсе — на странице проекта.

2017   веб-разработка   дизайн   пользовательский интерфейс   проекты   релиз
Ранее Ctrl + ↓