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

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

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

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

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

Элементы

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

Наблюдения

Ещё теги

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

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

Архив.орг теперь даёт это сделать. По ссылке — музей эмуляторов разных классических программ, включающий, например, Мак ОС 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17 марта   веб-разработка   дизайн   пользовательский интерфейс   проекты   релиз

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

На этой неделе мы открыли первый раздел книги «Пользовательский интерфейс». Раздел называется «Принципы».

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

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

Отдельно хочу сказать о главе «Привычка». Важнейшее знание здесь — о бесполезности подтверждения опасных действий. По моему опыту ведения практического интерфейсного курса, узнав о бесполезности окон «Вы уверены?», люди продолжают их делать.

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

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

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

Поддельный интерфейс не катит

Это в первую очередь для студентов Школы стажёров, но вообще для всех.

Начинающие дизайнеры интерфейса порой рисуют подделки:

Вот что это за батарейка в ПВУ? Что за поле поиска такое невозможное? В нём всё не настоящее: размеры, углы, тень, расположение иконки и текста.

Или мишень в центре. Откуда она такая? Зачем?

Ещё и от самого телефона тень куда-то вбок падает.

Другой вариант:

Весь статусбар поддельный: не тот размер, не такие кружки, не тот шрифт, не та батарейка. Между статусбаром и тулбаром линейка, которой на настоящем Айфоне нет. В поле поиска тоже всё не настоящее, особенно стирающий крестик справа.

Тут сам телефон поддельный:

Откуда с правой стороны три фигулины торчат? Неужели трудно найти фотографию Айфона и вспомнить, с какой стороны у него что? Что творится с бликами по всему периметру?

Андроид:

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

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

Ещё студентам:

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

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

Мы открыли демоглаву и предзаказ книги «Пользовательский интерфейс». В качестве демоглавы выбрали часть главы «Прицеливание», где самая классика про Закон Фиттса, его следствия и всякое вокруг:

Видосик:

Любимый разворот, где можно попробовать в действии «эффект бесконечных углов»:

Тоже любимый разворот:

А тут у нас магия со здоровенными курсорами, пролетающими над страницей, пока её крутишь:

Предзаказывайте книгу, будет круто.

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