ermouth: (ang)
Хром, когда-то бывший на фоне конкурентов просто таки blazing fast, уже не торт. Удивительно, но по некоторым характеристикам нынешний Хром медленнее Хрома 2014 года, например.

Я скажу больше: overall responsiveness у Хрома среди всех современных браузеров наихудшая. Это как-то плавно и незаметно произошло.

Когда-то давно (2014) я делал виджет для представления бюджета Архангельской области в виде интерактивного многоуровневого бублика, смотреть на https://dvinaland.ru/budget. Задача была сделать так, чтобы 500+ SVG-секторов не тормозили при анимации, в результате там jquerymy-виджет и подкрученный d3.js с пачкой довольно tricky кода поверх. Для анимации надо кликать на сектора есчо.

Так вот, в 2014 оно не тормозило только в Хроме и Сафари, а во всех остальных браузерах подлагивало. Теперь, в 2017, оно не тормозит вообще во всех новых браузерах (даже в IE Edge), кроме Хрома. Зато в Хроме просто адово лагает.

У меня есть ещё несколько тестов подобной сложности, релевантных моему workflow. В некоторых тестах Сафари уделывает Хром вдвое – а всего года два назад было почти наоборот. Даже FF стал Хром уделывать.

При этом сложность экосистемы нарастает одинаково для всех браузеров, но кроме Хрома все как-то справляются.

Что такое случилось с Хромом?
ermouth: (ang)
Клавиатурные шорткаты зума на Маке – один из самых прекрасных примеров интерфейсной унификации. Не так всеохватно, как копи-пэйст, поэтому мало кто пользуется – а очень же удобно.

Cmd + и Cmd - родом из Фотошопа. На Маке они работают в адобовских продуктах, Chrome, Safari, Opera, FF, Sublime, Fraise, Atom, Terminal и iTerm, Postman, iBooks, iMovie, Skype и во всём, что связано с графикой. Ещё выпадайка с иконками программ из дока понимает Cmd+/Cmd-, при том, что Finder – не понимает.

Хром так просто образец реализации, запоминает зум отдельно для каждого домена. Скажем, вКонтакт я просто физически не могу смотреть при 100%, там нужно 125. Хром об этом помнит.

Приложения, сделанные на Electron или подобиях вообще работают как в браузере – зумится весь интерфейс, кнопки там, менюшки-всплывайки и пр. Это очень круто и полезно, потому что представления о соразмерности у авторов софта сущестенно разные.

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

На Винде в Хроме зум – Ctrl+/Ctrl- если кто не знал. Тоже как в Фотошопе сделано.
ermouth: (ang)
Лж-френд Никитонский в своём посте про полный абзац в вебе в смысле не просто поддержки стандартов, а вообще качества стандартов, немного иронически страдает.
Но самый стресс, конечно, от безнадеги. Если на сервере ты работаешь на технологии и страдаешь, то ты знаешь, что рядом есть компании, который пишут на чем-то хорошем, и когда-нибудь ты там окажешься. <…> А на фронте не так. Логики нет, и надежды никакой нет.
Я понимаю, но мнение не разделяю. Конечно, когда впервые в полный рост сталкиваешься со всем набором прелестей около-яваскриптной экосистемы, становится грустно. Кажется, что везде бардак, анархия и вообще «куда катится этот веб».

В самом деле это не бардак и не анархия. Так выглядит изобилие.

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

Скажем, мне лично несколько раз крупно не везло с синтаксисом «код внутри разметки». Вот php там, angular, handlebars и всё такое. Да, xslt ещё. Сначала просто и красиво, но чуть отвернёшься – и кровавое месиво с костылями.

Чтобы не попадать постоянно на такие артефакты, достаточно соблюдать разумный консерватизм и умеренность. На пёстрый хайп интересно посмотреть с балкона – но не обязательно же в него вливаться. Ну не прямо же сразу, как минимум. Тем более, у изобилия есть два приятнейших момента:

А) Полно стабильных и проверенных артефактов. Хочешь rich controls, нормальные event-ы и ajax, работающие на чём угодно всегда – юзай jquery. Хочешь pub/sub и не париться про сокеты, лонгполлы и пр – юзай сокетио. Хочешь нормальную локальную базу – юзай localforage или pouchdb. То-есть, по аналогии с HAL (hardware abstraction layer) эти артефакты можно назвать BAL – browser abstraction layer.

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

Б) Под вновь открытую проблему быстро появляется простое и эффективное лекарство. То-есть потом, когда-нибудь, эта новая проблема может и будет побеждена и искоренена во всей экосистеме – но можно не ждать светлого будущего, а жить в реальном мире.

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

В общем, изобилие – комфортнейшее состояние экосистемы, если быть консервативным и избирательным, но прощать хорошим вещам небольшие несовершенства.
ermouth: (ang)
Посмотрел на днях два российских фильма для разнообразия – «Монах и бес» и «Ледокол».

«Ледокол» – обычное такое кино, советская романтика. Местами смешно, местами драматично, снято хорошо. Промотал примерно четверть в сумме, но смотреть можно.

«Монах и бес» – очень неровное. Вторая часть – где бес проявляется во плоти – совсем ходульная и снято плохо, промотал почти целиком. В первой части есть несколько смешных сцен, момент встречи царя так и вовсе отлично сделан, но тоже много промотал.

Подумалось, что хочется под таймлайном в видеоплеере видеть такую гистограмму напряжённости сюжета, чтоли. Зависимость движухи от времени. Чтобы сразу мотать до тех моментов, где есть какой-то пульс.

По-простому – какой-то дискриминатор кейфреймов из видеопотока, посложнее – нейронная сеть. Если совсем сложно, то можно вообще статистику собирать как юзеры фильм проматывали и на её основе выводить гистограмму «интересности».
ermouth: (ang)
ХЗ, как вставить эмбед в жэжэшный кривой редактор, поэтому ссылкой дам:

http://camerasim.com/apps/original-camerasim/web/

Я когда-то пробовал к такой интерфейсной задачке прицениться – и обломался. То-есть мне там мыслилось какое-то 3D, которое будет рендериться в зависимости от настроек. А можно оказывается круто проще.
ermouth: (ang)
Полдня размышлял в несколько философском смысле о мобильных версиях сайтов, продающих услуги пакетами (туризм). То-есть, небесспорно было, что версия для мобилы вообще должна отличаться от дескотопной чем-либо, кроме форматирования элементов и компоновки списков.

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

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

Получился очень простой вывод: мобильная версия должна быть в первую очередь заточена под обслуживание активного заказа (если такой есть), и в гораздо меньшей степени под покупку нового. С десктопом всё ровно наоборот.

Попахивает «уникальной революционной методикой» ггг 😜. В следующий раз на чём-нибудь безобидном запишу процесс, выложу.
ermouth: (ang)
На Техкранче попалась старая (дряхлая даже, больше месяца) публикация про новые наушники Apple. Наткнулся на неё после того, как прочитал, что Эппл выпуск наушников этих отложил.

Лид статьи:
After only a few days with Apple’s wireless AirPod headphones, it’s clear that there will be a huge platform business based on the reliable, persistent availability of a contextual artificial intelligence that can talk to you and receive commands.

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

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

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

То-есть я попробовал себе представить, какие бы я хотел команды, если бы считал слушающий меня компьютер более-менее сообразительным (что бы это ни значило). А потом попробовал этот несколько шизофренический диалог с вариациями представить картинками.

После некоторых размышлений у меня получилось, что стартовым экраном жэжэшечки мне хочется видеть фигурно выпиленный фид и набор карточек-кнопок, которые я сам могу определить (ссылки на них повесить). Дополнительно придумался фильтр «только новые», который бы помнил по каждому фиду, где я его закончил читать.

Попробую такой метод на реальном чём-нибудь.
ermouth: (ang)
Запилил кроппер для мобилок, даже на видео заскринкастил. На ведроиде тоже прекрасно работает, поворот фоток я поборол. Домен есчо тестовый, там пусто.

Идея с пинчем двумя пальцами отвалилась кста не прожив и двух дней – по двум причинам.

Во-первых, пинч проигрывает обычному кропперу по эргономике – задействованы обе руки, причём на активной нужно два пальца. Обычный кроппер обходится одной рукой, и только большим пальцем (на видео). Ну и во-вторых, кроппер с пинчем просто геморройно делать.



Ещё я сегодня голыми руками (точнее, рукой) поймал на лету синицу. Мне на лоджию залетела – и оказалась настолько тупой, что как муха стала биться в стекло. Пока нёс до окна, чтобы выбросить, успел удивиться, что она перестала дёргаться сразу, как я её схватил. Наверное, подумла, что её уже съели )

Mic drop

Apr. 2nd, 2016 11:32 pm
ermouth: (Default)

Я недавно писал про важность компоновки в интерфейсах, и тут такой пример подоспел. Google на 1 апреля знатно обмишурился, вставив рядом с кнопкой Send непонятную шнягу:

drop

Этот Send+ отправляет письмо с двусмысленным сюрпризом, что, учитывая сотни миллионов пользователей, привело к очень некрасивым всяким, хотя и единичным, последствиям.

В интерфейсе допущена просто таки хрестоматийная ошибка – расположение деструктивных (или необычных) элементов интерфейса рядом с основными рабочими. Google тут совсем не одинок – Microsoft сделала когда-то такое же в проводнике, только на постоянку, а не 1 апреля.

Хорошие мальчики делают вот так:

Снимок экрана 2016-04-02 в 23.16.59

Или вот так (не то же самое, потому что надо учитывать ещё и расположение контролов выше кнопки):

Снимок экрана 2016-04-02 в 23.17.58

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

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

ermouth: (Default)

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

https://geektimes.ru/post/272196/

Из 4063 пилотов ни один человек не соответствовал среднему диапазону по всем 10 параметрам. У одного были руки длиннее среднего и ноги короче среднего, у другого могла быть широкая грудь, но маленькие бёдра.

Что ещё более поразительно, Дэниэлс выяснил, что если взять всего три из десяти параметров размера — например, окружность шеи, окружность бедра и окружность запястья — менее 3,5% лётчиков соответствовали средним параметрам по всем трём показателям.

Выводы Дэниэлса были ясными и неопровержимыми. Не существовало такого понятия как средний пилот. Если вы проектируете кабину для среднего пилота, то в реальности он не будет подходить ни для кого.

Хороший интерфейс под одну роль состоит из двух частей – простой и сложной. Простая – это то, что всё время крутят, а сложная – это то, что нужно для старта системы, обслуживания или каких-то advanced функций.

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

У меня где-то с виндовых ещё времён был сохранён скриншот апофеоза таких бессмысленных интерфейсных упражнений – окошко настроек внешнего вида настроек о_О Жаль, не нашёлся.

Простая, повседневная часть, напротив должна быть настраиваема – по очень небольшому набору параметров, но довольно широко. Подгоночные ремешки устроены просто и стоят дёшево.

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

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

ermouth: (ang)
Меня внезапно осенило, почему лишь очень небольшая часть хороших программистов в состоянии делать хорошие юзер-интерфейсы.

Дело в том, что хороший интерфейс – это система, в которой основную роль играет качество компоновки, а не качество реализации внутренних подсистем как таковых. В отличие от, скажем, программ командной строки или серверных решений, экспортирующих API.

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

Типичная программа редко приближается к ограничениям окружения – обычно имеется существенный резерв, нередко на порядки. Да и самих ограничений рантайма не так и много: CPU, IO, RAM, overall response time.

С UI всё совсем не так – ограничения на время отклика отдельных частей, геометрию, да просто количество элементов, на связность и сгруппированность их, очень жесткие, никаких «туда-сюда на порядок» там нет в помине. Плюс целевые системы могут очень отличаться по производительности и, например, размерам экрана.

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

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

Сначала выбирается стратегия, а затем итеративно строится путь, причём возврат «назад», к началу, стóит существенно дороже, чем движение вперёд. Примерно так мы играем в шахматы. Примерно так выглядит процесс обучения, когда мы учимся самостоятельно.

Компоновка – это игра, а программисты нередко слишком серьёзные )
ermouth: (Default)

Перепозиционировал это всё как noBackend OS, с известной долей иронии каэш. Теперь и на гитхабе – https://github.com/ermouth/cloudwall

Снимок-экрана-2015-04-08-в-1.37.50 

Главные фичи

Оно теперь опенсорц. Установить можно на любой статический хостинг прямо из .tgz, там только html + js + json + css.

Исправлено куча багов, апгрейд библиотек сделан, примерчики добавлены, приложения обновлены. Ещё я там на заглавной выложил унылый шестиминутный скринкаст как за час сделать, отладить и задеплоить приложение для организации распределённых дискуссий. Целых 4кБ длиной приложение, ога.

И – тадам – это всё можно форкать и править/пересобирать форк самого CloudWall прямо в браузере. То-есть можно скачать себе в браузер исходники, это примерно так выглядит:

Снимок экрана 2015-04-08 в 1.38.45

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

Important notice

Если кто-то юзал или смотрел cloudwall.me до этого, не забудьте обновить системные приложения. Как войдёте – серая кнопка Check updates в левой панели внизу.

И да, информация о документе и всякие copy/delete теперь – через клик по иконке документа.

Сделано в CloudWall

CloudWall в текущей версии полностью написан и собран в CloudWall, только иконки не в окошке браузера нарисованы. Сам сайт cloudwall.me тоже управляется прямо из CloudWall.

Вообще, у меня лично внутрибраузерная боевая БД перевалила за 400 мегов. Полёт прекрасный.

---

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

ermouth: (Default)

Тарам-тарам… Вашему вниманию предлагается 0.1β прототипа нового портала ЖКХ.
 

imageMyHome29.ru

 

Архангелогородцам и Северодвинцам – заходите, отмечайтесь, пишите полезные телефоны. Замечу, что написанные вами телефоны покажутся, скорее всего, и в соседних домах.

В Севске УК проставлены у примерно 75% жилфонда. В Архске – только 5%. Так что, дорогие Архангелогородцы, возьмите плиз квиточек, отметьте какая у вас УК.

Скоро будут лайки и жалобы. Карты сейчас иногда ничего не находят – это тоже скоро поправим.

Ругайте. Здесь в комментах или вКонтактеге.

ermouth: (Default)

Я тут развлёкся и нарисовал работающий прототип выбора дома для портала ЖКХ. В общей сложности это у меня заняло примерно 6 часов.

Выглядит это так (клик перекинет на работающую страничку):

image

Адреса внизу – это куда я ходил, страничка помнит ваши последние дома.

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

Read more... )
ermouth: (Default)

Чуть меньше недели назад я тут написал грустный пост про правительственный дезигн. И пообещал в конце нарисовать, как должен на мой взгляд выглядеть портал ЖКХ (его современное состояние можно лицезреть по адресу gkh.dvinaland.ru).

Задача осложняется тем, что вряд-ли кто-то будет вносить серьёзные изменения в серверный код и надо использовать то, что уже есть. То-есть перелицовывать html и недостающий функционал добавлять по преимуществу уже в браузере.

Ну и конечно, смотрел я в первую очередь с точки зрения сценариев пользователя, а не инженера.

Всю неделю думал, порвал два баяна и вот что получилось в черновой итерации (тык на большие картинки – фуллскрин).

Так может выглядеть заглавная для неавторизованного пользователя:

image

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

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

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

Ну и редактура нужна – та имперско-канцелярская велеречивость, что сейчас, ужасна местами до оторопи (например вот премерчег, смотрим на заголовок и breadcrumbs бгг)

Но основное – это стимулирование регистрации и удобный выбор дома. И вот что мне придумалось…

Read more... )

Profile

ermouth: (Default)
ermouth

September 2017

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 24th, 2017 07:30 pm
Powered by Dreamwidth Studios