Русский
Русский
English
Статистика
Реклама

Интерфейсы

Recovery mode Баг или фича определителя номера от Тинькова, или как не нужно наполнять базу

02.06.2021 12:04:43 | Автор: admin

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

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

Вот что определитель думает про общий номер Альфы...Вот что определитель думает про общий номер Альфы...

У этого замечательного определителя есть, я бы сказал, милая фича: по моим наблюдениям, все и каждый из мне звонивших номеров других банков определялись с пометкой "Мошенники могут использовать номер". При этом, как я говорил, база у программы широкая, и у тех же Альфы или Сбера помечаются не только публично известные номера вроде 8-800-200-00-00, но и все номера офисов и служб.

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

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

...а вот так определитель пишет про номер Тинькофф Банка...а вот так определитель пишет про номер Тинькофф Банка

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

P.S. Баг наполнения БД ли это, либо и правда, некая фича, но, признаться, получилось у ребят наприятно отвлекающе. Тем более, что iPhone не позволяет выводить много текста при описании номера, и при звонке в/из Альфы я вижу не "Альфа-Банк. Будьте осторожны", а только начало приведенной выше фразы, т.е. "Мошенники могут и...". Интересно, UI на такой надписи вообще тестировали?

Подробнее..

Недоумение про ещё один корпоративный чат или как сделать приятно всем

21.06.2021 12:17:59 | Автор: admin

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

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

Чтоб было безопасно. Т.е. чтоб не просто data scientist модный в шортиках из одной американской/китайской/российской компании не мог в рамках своих задач узнать что-то полезное, а даже рядовой админ банка не смог увидеть или унести переписку одного уважаемого человека с другим. Даже в качестве картинки. Даже на свой админский супер-защищённый комп. Следовательно, оно должно быть self-hosted разворачиваемо отдельно и полностью контролируется исключительно теми, кому положено следить и зарплату за это платят. Ещё нужно подключиться к системам, отвечающим за безопасность передаваемого контента. Ещё нужно иметь в руках команды сопровождения все возможные рычаги, чтобы нерадивого пользователя можно было ограничить в желании другому пользователю передавать то, что не положено.

Чтобы было удобно. Сейчас на дворе 2021 год. Но даже закачать справочник пользователей или синтегрить с корпоративной телефонией банка что-то это уже подвиг на грани фантастики. И удивлению моему не было предела тот же slack обладает пользовательским интерфейсом, который физически невозможно объяснить курьеру из доставки подавай ему пользовательский интерфейс ala telegram. И желательно с видео конференциями встроенными. И прям очень нужен голосовой виртуальный ассистент, голосом удобнее. Ещё невозможно объяснить человеку, у которого есть одновременно два телефона, планшет и два компьютера почему ему нужно выбрать, где же можно работать с этим мессенджером, а где остаться без мессенджера. Ну и зачем каждый раз свой номер телефона светить не ясно.

Чтобы было удобно для внутренних коммуникаций. Тут приходят умные люди из разных отделов, департаментов и цельных предприятий и говорят нам возможность узконаправленных рассылок нужна. Таргетированных, как это модно называть. По полу, по городу, по региону, по подразделению, по должности и т.д. И в этот момент все open-source решения для чатов (а их только на github больше 2100 штук) куда-то деваются. Остаются те, кто реально зарабатывает. Но первый пункт не выполняется.

Чтобы развитие продукта помогало бизнесу, а не мешало всем подряд. Удивительно, но с этой точки зрения почти никто не смотрит. Сколько времени сотрудник тратит на поиск телефона в адресной книге где-то там, потом нужно найти телефон, чтобы позвонить и на этом телефоне набрать 11 заветных цифр. И выяснить, например, что номер с ошибкой. Гораздо удобнее нашёл ФИО, посмотрел фото и сразу набрал. Нужно ещё двоих подключить аналогично набрал и добавил. И никакой музыки от абонента, которому кто-то в это время позвонил, портящей всем 114 остальным участникам совещания не только настроение. 2021 на дворе. И чтоб если нужно любой модуль за месяц прикрутить можно было. Ну хорошо, иногда за два

Отсутствие зависимости от вендора и его капризов. Если ты маленькая организация из 50 человек (а по статистике таких ох как много), тебе нужно решение готовое. Даже когда 3000 человек нужно обслужить вопрос даже не стоит идёшь и выбираешь решение. Можно даже покапризничать и тендер объявить. А если у тебя 400 000 сотрудников? А если миллион планируется? Тут и вендоров вечных с хорошим SLA мало, и возможности их контролировать тоже не велики. Или вендор маленький и может случайно помереть при очередном кризисе или принятии закона/уехать ему понадобится всей командой, или вендор большой, но его мало интересуют проблемы конкретного клиента у него самого может быть 40 000 сотрудников и 1000 таких же клиентов по миру.

Казалось бы каждое из этих пяти требований по отдельности легко покрывается тысячами продуктов. Если взять и выкинуть одно тоже есть десятки. А вот всё вместе и сразу можно только самим мучительно делать. Чем и занимаемся. И вас зовём.

Ну и на всякий случай сошлюсь на бородатые требования одного habrовода (http://personeltest.ru/aways/habr.com/ru/post/405887/ - их мы тоже учли и удовлетворили): кроссплатформенность. Чтоб я наконец-то мог сидя на обеде, или в транспорте, или в отпуске кому-то что-то написать с телефона, да и узнать, что мне кто-то написал. И чтоб мой коллега, у которого Линукс, не делал каждый раз печальное лицо при слове чат. заточенный под общение в компаниях. Чтоб у меня был чат, где есть все мои коллеги и только мои коллеги живой активный проект. Чтобы баги, как застывшие в янтаре насекомые, не висели в продукте до конца времён передача файлов. Ну зачем мне заливать эту картинку в общую папку, если я просто могу кинуть её через чат! нормальная синхронизация уведомлений / непрочитанного. Чтобы не как в Скайпе словил сообщение, и потом в течение 24 часов находишь уведомление о нём на каждом своём девайсе.

Продолжение следует.

Подробнее..

Моя эволюция интерфейсов систем диспетчеризации

30.05.2021 20:12:29 | Автор: admin

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

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

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

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

Лонгрид!

2014

Главное окно с мнемосхемой на сенсорной панеле управления 7 дюймовГлавное окно с мнемосхемой на сенсорной панеле управления 7 дюймовОсновное меню с настройками на сенсорной панеле управления 7 дюймовОсновное меню с настройками на сенсорной панеле управления 7 дюймовОкно диспетчеризации, можно открыть на любом устройстве под управлением WindowsОкно диспетчеризации, можно открыть на любом устройстве под управлением Windows

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

С самого первого объекта я начал применять темный интерфейс. У специализированных программ (AutoCad, Photoshop), был темно-серый интерфейс, в нем было комфортно работать долгое время и я решил придерживаться их идеологии. К тому же, помещение ИТП было без освещения и очень темным, делать яркий светлый фон на панеле просто издевательство над эксплуатацией. Хотя сейчас у нас в портфолио есть кейсы со светлой темой, все равно, на сегодняшний день предпочтение отдается именно темной.

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

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

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

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

2015

Приточно-вытяжная установка с гликолевым рекуператором. Панель оператора 10 дюймов.Приточно-вытяжная установка с гликолевым рекуператором. Панель оператора 10 дюймов.

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

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

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

2016

Станция ВЗУ коттеджного поселка. Панель оператора 10 дюймов.Станция ВЗУ коттеджного поселка. Панель оператора 10 дюймов.

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

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

Структура меню не изменилась, изменился немного дизайн. Добавились иконки в пунктах меню. Иконки декоративные, какой-то пользы они не несут, скорее просто иконки ради иконок. Здесь они крупные, выполнены в стиле Flat, занимают прилично место на экране. В дальнейшем от иконок мы не отказывались, они стали меньше и аккуратнее и лучше вписываются в общую стилистику. Стоит применять иконки или нет в пунктах меню ответить однозначно сложно. Думаю, что так же как и с 3Д картинками, не под все пункты меню можно подобрать подходящие по стилю и смыслу иконки. Если есть возможность добавить аккуратные иконки, не уменьшая полезную площадь подписей, то лучше их добавить, они разбавят табличную структуру меню.

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

2017

Производственно-складской комплекс, МО, обзорная схема, 27 дюймовПроизводственно-складской комплекс, МО, обзорная схема, 27 дюймовПроизводственно-складской комплекс, МО, под экран планшета и ноутбукаПроизводственно-складской комплекс, МО, под экран планшета и ноутбука

В начале года был довольно крупный объект, комплексная диспетчеризация производственно-складского комплекса. Этот клиент дал много опыта с точки зрения инженерных систем и алгоритмов управления, но сделать что-то принципиально новое в интерфейсе на тот год не вышло. В этом интерфейсе применяли все уже предыдущие наработки, немного дорабатывая и улучшая. Здесь уже есть какое-то выравнивание. Отступы гуляют по-прежнему, но, в целом, сетка объектов прослеживается, от этого интерфейс выглядит чище и строже. Переменные индикации отличаются визуально от уставок. Кнопки и тумблеры не наши, они стандартные от Scada и их изменить было нельзя.

2018

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

Основное отличие подхода к разработке этого интерфейса от предыдущих, это то, как рисуется вся статика. До этого интерфейс собирался по частям в среде разработки для панелей и в Scada системе, это очень усложняет процесс, особенно, выравнивание объектов. Здесь же вся статика делается в графическом редакторе и подгружается одной картинкой PNG на экран. Сверху накладываются только переменные и анимация. Это сразу убивает несколько зайцев: выравнивать и делать отступы можно с большой точностью, скорость загрузки страниц увеличивается, так как нужно меньше информации подгружать из памяти, уменьшается нагрузка на процессор.

С точки зрения дизайна, тут появилось много нового. Появился не стандартный шрифт GothamPro, цвета теперь не рандомные, а подобраны из палитр Material Design, появились кратные отступы и сетка. Объекты теперь выровнены все относительны друг друга. Поля индикации и ввода значения уже стали существенно различаться, к этому быстро привыкаешь и пользоваться становится удобно.

Что осталось от прежних интерфейсов? Структура меню, она не поменялась, иконки стали меньше и аккуратнее, теперь они гармонично вписались в общую стилистику. Иконки на главном окне с мнемосхемой остались прежние, но сама мнемосхема слегка упростилась и стала чуть более плоской. Это был последний год использования этих иконок и 3Д элементов в целом.

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

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

Приточно-вытяжная вентиляция, экран с диспетчерской, 25 дюймовПриточно-вытяжная вентиляция, экран с диспетчерской, 25 дюймовПринципиальная схема котельной, монитор с диспетчерской 25 дюймовПринципиальная схема котельной, монитор с диспетчерской 25 дюймовОбзорная схема инженерных систем логистического центра, 25 дюймовОбзорная схема инженерных систем логистического центра, 25 дюймов

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

Что касается главного экрана, то здесь реализован "карточный" интерфейс. Смысл его в том, чтобы структурировать информацию по системам, на каждую сделать свою карточку и разместить ее на схеме здания. Если систем много, можно разделить их по нескольким экранам, если не много, то можно все показать на одном экране и отделить разные схемы цветами. На карточке нужно отображать только самые основные параметры, которые влияют на работоспособность установки и которые можно сравнивать между собой. Для вентиляции наиболее важными параметрами являются: статус работы, наличие аварий, режим зима/лето, температура канала, помещения и обратной воды. Дополнительно стараемся отображать обороты вентилятора, процент открытия клапана и задание уставки температуры. Эти значения позволяют быстро оценить стабильность работы вентсистем и теплоснабжения установок, не переходя к схемам каждой системы отдельно. Очень удобно на одном экране сравнивать параметры работы разных систем. Если, например, наблюдается недогрев по многим системам, значит есть проблемы с теплоснабжением из котельной.

У нас есть объекты, которые имеют один этаж и там удобно все карточки систем размещать на планировке здания, привязывая к их реальному местоположению на плане. Есть объекты в 4-5 этажей, и здесь становится сложнее структурировать карточки. Можно разделить экран на 4 равных части и на каждом отобразить свой этаж с системами. Можно сделать 4 экрана, на каждом свой этаж с нанесенным на нем системами, но здесь могут быть нюансы, как правило, большая часть систем располагается на -1 этаже и на последнем или кровле, что приводит к сильному дисбалансу. Мы пробовали разные варианты, расскажу об этом чуть дальше в статье.

2019

Приточно-вытяжная установка, панель оператора 7 дюймовПриточно-вытяжная установка, панель оператора 7 дюймовМенюшка, панель 7 дюймовМенюшка, панель 7 дюймов

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

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

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

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

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

  2. Наводим порядок в цветах для удобства взаимодействия пользователя с интерфейсом. Оттенки темного цвета используются для фона, полей и заголовков, серым обозначаются подписи и весь текст в целом. Белый это переменные и все динамические значения. Яркий синий это цвет акцента, им обозначаются все элементы, с которыми пользователь может взаимодействовать, кнопки и уставки. И стандартные цвета: зеленый, желтый и красный, отвечают за состояние и индикацию.

Диспетчеризация торгово-развлекательного центра, окно вентустановки, монитор 32 дюймаДиспетчеризация торгово-развлекательного центра, окно вентустановки, монитор 32 дюймаСводное окно венткамеры, монитор 32 дюймаСводное окно венткамеры, монитор 32 дюймаГлавный экран с обзорной схемой вентустановок, монитор 32 дюйма.Главный экран с обзорной схемой вентустановок, монитор 32 дюйма.

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

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

Здесь очень удачно планировка ТЦ вписалась в разрешение Scada системы примерно 1920 х 980 рх., это позволило расположить максимум полезной информации с привязкой к физическому местоположению. Так как систем много (около 150 штук) то лучший вариант разбить их по венткамерам, где находятся щиты управления, отобразить системы как название и подкрашивать его в зависимости от состояния. Серый выведен из эксплуатации, белый стоянка, зеленая работает, желтая требует обслуживания, красный авария. Дальше архитектура строится так: при клике на венткамеру открывается табличный вид связанных систем с их основными параметрами. При клике на название системы уже откроется мнемосхема со всеми доступными параметрами и настройками.

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

2020

Приточно-вытяжная установка с увлажнением, монитор 25 дюймовПриточно-вытяжная установка с увлажнением, монитор 25 дюймовПриточно-вытяжная установка с увлажнением, монитор 25 дюймовПриточно-вытяжная установка с увлажнением, монитор 25 дюймовОбзорная схема системы диспетчеризации, медицинский центр, монитор 23 дюймаОбзорная схема системы диспетчеризации, медицинский центр, монитор 23 дюймаОбзорная схема системы диспетчеризации ТРЦ Рассвет, Москва, монитор 23 дюймаОбзорная схема системы диспетчеризации ТРЦ Рассвет, Москва, монитор 23 дюймаМнемосхема приточно-вытяжной установки.Мнемосхема приточно-вытяжной установки.

Так, ну в этом году продолжилось логическое развитие интерфейсов с некоторыми экспериментами. Расскажу по порядку.

Квадратные закругленные плашки на мнемосхеме превратились в круг. Если проследить за этими плашками, то можно увидеть, как они из квадрата медленно превращаются в круг. Круглый элемент выглядит на схеме лучше, он визуально освобождает больше пространства на самой схеме, делает ее лаконичнее, но при этом вылезает сразу несколько проблем. Рассмотрим водяной калорифер. У него есть несколько параметров, которые обязательно нужно показать на схеме: температура обратной воды, процент открытия клапана, статус работы насоса. Желательно еще показать статус термостата защиты от разморозки и разместить какую-то иконку, чтобы отличить узел нагрева от узла охлаждения. Как все это поместить в круг, чтобы при этом информация считывалась и не рушилась вся концепция придумать на этом этапе я не смог. Поэтому, на примерах сверху было два решения. Первое, убрать часть информации в нижнюю плашку меню или в другое место. Второе, просто сделать подложку под нагрев значительно больше, чем другие круглые элементы схемы и разместить все в ней. Оба варианта не самые лучшие, но иначе сделать не получалось. При этом все равно круглые элементы выглядят лучше и перспективнее прямоугольных.

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

Если вы дочитали до этого места, то скорее всего обратили внимание, что впервые появился светлый интерфейс =). Появилась очень интересная идея сделать универсальный интерфейс с темной и светлой темой и переключать его либо автоматически от времени суток, либо вручную. Реализовали эту идею так: подложки на 95 процентов прозрачные с небольшим оттенком серого, статические элементы имеют цвета не сильно контрастирующие на темном и светлом фоне, переменные имеют подобранный серый цвет, больше контрастирующий на темном и светлом фоне. По сути, мы только меняем цвет фона с белого на темно серый, а все элементы остаются без изменения. С точки зрения работы Scada системы процесс максимально простой, подмена одного фона на другой, без замены других элементов, это не перегружает процесс работы и отрисовки. У такого решения есть минус, сложно подобрать цвета одинаково правильно отображающиеся тут и там, от этого переменные немного теряются на общем фоне. Есть вариант вместе с фоном менять скриптами и цвета переменных и других элементов, но не понятно насколько это может загрузить процесс отрисовки.

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

2021

Главное окно системы диспетчеризации, логистический центр, МОГлавное окно системы диспетчеризации, логистический центр, МОМнемосхема приточно-вытяжной установкиМнемосхема приточно-вытяжной установкиЭкран работы вентустановки воздушного отопленияЭкран работы вентустановки воздушного отопленияОбзорная схема работы котельнойОбзорная схема работы котельной

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

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

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

С точки зрения Scada системы, мы имеем набор кадров (в нагревателе больше 100 кадров), которые меняются в зависимости от условий. Никаких GIF анимаций и наложенных слоев, отрисовка и реакция происходит мгновенно.

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

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

2022

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

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

Подробнее..

Кейс аналитика системы освещения в логистическом центре

17.06.2021 20:21:19 | Автор: admin

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

Клиент: крупный логистический центр в Московской Области, с которым мы работаем с 2016 года. За это время мы провели уже много работ по диспетчеризации инженерных систем, вывели в единую BMS вентиляцию, котельную, энергетику, отопление, энергоучет и много чего еще. А в этом году решили добавить еще и диспетчеризацию освещения в общую систему.

Что имеем? Установлен силовой шкаф управления освещением на 45 линий: складские ряды, коридоры, мезонин. На каждой линии установлен автомат защиты и модульный контактор. Помимо силового щита есть щит управления с ручным и автоматическим управлением. Автоматическое управление подразумевает включение и выключение линии по датчику движения, которые установлены в рядах, где двигается техника. Некоторые линии находятся в ручной режиме и постоянно включены, а некоторые, наоборот выключены. Задачу нам поставили следующую: отслеживать работу каждой линии, отслеживать залипание контакторов, оповещать о неисправностях и получать аналитику по наработке. Можно было бы полностью заменить шкафы, сделать дистанционное управление, расписание и много чего еще, но это было бы очень сильное удорожание проекта, а нас попросили именно вписаться в небольшой бюджет не меняя того, что и так работает стабильно.

Задача поставлена, начинаем реализацию. Есть несколько способов отследить работу линии освещения. Самый простой способ это использовать свободный или дополнительный контакт модульного контактора. Но конкретно в нашем случае эта схема не сработает, так как питание катушки контактора идет от общего автомата и возможна ситуация, когда на линии освещения контактор будет замкнут, а автомат выключен и питания на линии не будет. Этот способ будет работать только если питание катушки контактора идет из под автомата этого же контактора. Можно было бы поставить дополнительные контакты положения и сработки к автоматам, это даст более полную картину, но в нашем случае места в шкафу не было от слова совсем и раздвинуть автоматы для дополнительных контактов просто не было возможности. Решили пойти самым надежным путем, взять непосредственно фазу, идущую на питание линии и завести ее на контроллер. Так как у нас большая часть автоматики на объекте сделана на отечественных Контарах, то мы просто взяли модули расширения, которые воспринимают 220 вольт на входе. Это не частая опция у контроллеров, поэтому, если бы стоял другой производитель, пришлось бы ставить 45 промежуточных реле. Получился аккуратный и не большой шкаф диспетчеризации, мы повесили его рядом с силовым шкафом и обвязали все аккуратно многожильным кабелем. Расключение шкафа и отключение света согласовали заранее, а на все работы ушло около 1,5 часов.

Подключаем сигнальные линииПодключаем сигнальные линии

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

Силовой шкаф до расключенияСиловой шкаф до расключения

Дальше разрабатываем интерфейс пользователя.

Основное окно секции освещения Основное окно секции освещения

Здесь 46 линий разбитые на 2 экрана. Порядковый номер, состояние линии (включена, выключена, неисправна) и комментарий. Внизу есть оперативный график, можно посмотреть, как менялось состояние линии за последний час. Линии можно переключать, на скриншоте выбрана 16 линия.

На этом экране можно получить оперативную информацию о состоянии освещения. Есть отдельные окна трендов и настроек.

Окно с настройкамиОкно с настройками

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

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

Временные трендыВременные тренды

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

Отчет за выбранное времяОтчет за выбранное время

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

Отчет за выбранное времяОтчет за выбранное время

Вторая страница отчета выводит ту же информацию, но в виде диаграмм.

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

Подробнее..

15 полезных аккаунтов Twitter для UX-дизайнера

15.05.2021 00:09:47 | Автор: admin

Арт-объект из проекта Неудобно греческого дизайнера Katerina Kamprani

Для дизайнера круто иметь насмотренность. Так меньше вероятность навелосипедить и сделать продукт, вроде ключа на картинке ниже.

Повышать насмотренность (и начитанность) можно наблюдая за топовыми чуваками из интересующей сферы. А интересует меня, как начинающего дизайнера, User Experience и с чем его едят.

Под катом список известных в сфере UX дизайна имен, от мастрида, вроде Дона Нормана, до менее знакомых широкой публике, вроде автора логотипа Firefox. Там же ссылки на их твиттеры, блоги и некоторые проекты.

Я только формируют свой твит-лист для слежки, так что порадуюсь дополнениям.

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

Хочу заметить, что это не ранжированный список.

15 человек в UX, за которыми стоит следить в Twitter



Don Norman


Дон Норман один из самых известных UX-дизайнеров в мире, именно он придумал термин user experience. Про Нормана даже есть небольшая статья в русской Википедии. Его щебет редко раздается в твиттере, зато его личном блоге можно найти ссылки на все его книги и эссе.
Дон в твитере @jnd1er.


Дон Норман позирует с фирменным кофейником, который используется в обложке книги. Иллюстрация Захари Монтейро.

Steve Krug


Стив Круг, юзабилити эксперт, написавший книгу "Не заставляйте меня думать". Она считается основным текстом для специалистов по юзабилити, и сейчас переиздается в третий раз. Стив ведет Twitter @skrug и личный блог.



Bill Buxton


Билл Бакстон занимается дизайном взаимодействия и исследованиями. Он является главным исследователем в Microsoft Research и ранее возглавлял собственную консалтинговую фирму Buxton Design. В 2001 году Билл был назван одним из 10 самых влиятельных новаторов в Голливуде. Он регулярно публикуется в Твиттере и ведет блог. Один из создателей Marking menu (круговое меню на рисунке справа).
Автор книги "Sketching User Experiences". Твиттер Билла @wasbuxton.



Irene Au


Айрен Ау бывший руководитель отдела дизайна в Google, Yahoo и Udacity. В 1996 она начала свою карьерув Netscape Communications, руководила разработкой Netscape 5.0. Ирен также является инструктором по йоге и четыре раза в неделю преподает ее в ПалоАльто. Найти ее в твиттере: @irenaeus.



Olof Schybergson


Олоф Шайбергсон ко-фаундер и CEO Fjord, одной из ведущих мировых консалтинговых компаний по дизайну услуг. Так же он CXO в AccentureActive. Он работал со всеми, от BBC до Ситибанка и Foursquare. Он часто посещает твиттер и делится своими интересами. Его твиттер @Olof_S.



Patrick Neeman


Патрик Ньюман один из самых плодовитых пользователей Twitter UX (почти 53 000 твитов и он продолжает твитить). usabilitycounts.com это его детище. Это веб-сайт с множеством советов для профессионалов UX. Его карьера проходит через такие компании, как Microsoft, MySpace, Orbitz, NewsCorp, Paramount, Comcast, Disney, Amgen и eBay. В его ленте как шутки о UX, так и более серьезные вещи.
Патрик в твиттере @usabilitycounts.

Laura Klein


Лора Кляйн написала UX for Lean Startups и Build Better Products. Она эксперт по бережливому UX из Кремниевой долины, часто делится знаниями для UX-дизайнеров в твиттере: @lauraklein.



Scott Jenson


Скотт Дженсон возглавляет проект Chrome Physical Web. До этого он работал над мобильными картами Google, Mac OS 7 и Apple Newton. Он публикует много интересных вещей в твиттере и регулярно ссылается на свои статьи. Читать его твиттер: @scottjenson.



Luke Wroblewski


Люк Вроблевский ведет личный блог. Он работал в Yahoo и eBay. Компании, которые он основал: Polar (приобретен Google), Bagcheck (приобретен Twitter). Он автор книг Mobile First, Web Form Design и Site-Seeing. Именно он придумал идею "Mobile First" (что лучше сначала разработать дизайн для самого маленького экрана, а не сжимать все с большого экрана в маленький). Вот его твиттер @lukew.



Karen McGrane


Карен МакГрейн специалист по UX и контенту. В 2006 она занималась редизайном New York Times. Она работала с Cond Nast, Disney и Citibank. Свои статьи она публикует в блоге.
Посмотреть, что пишет Карен @karenmcgrane.



Jan Jursa


Ян Джурса UX-дизайнер из Германии. Он ведет ленту Twitter о UX, выпускает два подкаста о UX, отвечает за три конференции каждый год и находит время, чтобы разрабатывать дизайн мобильных приложений. Он также создал книгу "UX Storytellers", содержащую истории более 40 специалистов по UX. Твитер Яна: @IATV.



Khoi Vinh


Графический дизайнер Хой Винь в настоящее время является главным дизайнером в Adobe. Он также постоянно твиттит и бложит по теме дизайна. Он возглавлял разработку дизайна в New York Times 4 года, после издал книгу "Ordering Disorder: Grid Principles for Web Design". Твиттер @khoi.



Daniel Burka


Даниэль Бурка когда-то был креативным директором Digg, и партнером по дизайну в Google Ventures. Ему принадлежит идея логотипа Firefox, он работал с с Mozilla в составе команды Mozilla Visual Identity Team. В настоящее время Бурка директор по продукту и дизайну в некоммерческой организации Resolve to Save Lives, где он работает над проектом Simple.org. Он регулярно пишет в твиттере на самые разные темы: @burka.



Peter Merholz


Питер Мерхольц соучредитель Adaptive Path и создатель блога peterme.com. Кстати, он в прямом смысле создатель блога, слово блог придумал он. В 2016 году издал в соавторстве книгу "Org Design for Design Orgs". Найти Питера: @peter.



Taylor Ling


Тейлор Линг из Малайзии, пишет для androiduiux.com. Он эксперт Google Developer Expert (GDE) по UX-дизайну. Он ко-фаундер и главный дизайнер The Fabulous. Тейлор в твиттере: @tailoring.


Приветствие нового пользователя в приложении для контроля привычек The Fabulous



Телеграм-канал Дрын Дезигн: делюсь там своими находками по дизайну (туториалы, статьи, ссылки на аккаунты клевых чуваков).
Подробнее..

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

16.05.2021 22:09:51 | Автор: admin

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

Фотография: Giorgio Trovato. Источник: Unsplash.comФотография: Giorgio Trovato. Источник: Unsplash.com

На периферии

В конце марта один из резидентов Hacker News высказал мнение о том, что проектировщики интерфейсов цифровых продуктов Эппл не уделяют должного внимания визуальной составляющей музыкальных альбомов и других типов аудиоконтента. Он привел в качестве иллюстрации своих доводов внешний вид экранов музыкального приложения компании на iPod Touch 2012 года и iPhone SE 2016-го. Последний предлагает слушателям уменьшенный вариант обложки не растягивает ее на весь экран, как на iPod Touch. Поэтому рассмотреть детали иллюстрации становится сложнее, а на паузе изображение становится еще меньше.

Разница размеров обложки на локскрине устройств намного заметнее на Touch она занимает чуть ли не всю ширину экрана, а на iPhone лишь небольшую его часть в виде пиктограммы внутри виджета с управляющими элементами плеера музыкального приложения. При этом прочитать полное имя исполнителя и запущенного трека сразу невозможно места рядом с уменьшенной обложкой не хватает и для них. Автор заметки задает эти вопросы аудитории и вспоминает так называемый Cover Flow, который в Эппл представили вместе с очередной версией iTunes в 2006 году, а на iPhone и iPod nano выпустили в 2007-м. Кстати, тогда обложки тоже растягивали практически на всю ширину экрана устройств, а при просмотре в режиме Cover Flow они становись еще и интерактивными по тапу открывали список треков альбома.

Фотография: Paul Downey. Источник: Flickr.com (CC BY 2.0)Фотография: Paul Downey. Источник: Flickr.com (CC BY 2.0)

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

Дошло до того, что в ряде случаев на кавере не было ничего кроме текста с названием альбома и однотонного фона. Об этой проблеме тогда высказывался арт-директор Warner Brothers Records, представители других крупных лейблов, ряд известных музыкантов и дизайнеров. Однако, как мы видим по примеру, от которого мы оттолкнулись в начале материала, на стороне музыкальных платформ эти вопросы и предостережения просто-напросто проигнорировали. Да и качество обложек к тому моменту уже не позволяло в один миг вернуть к ним прежнее внимание.

Попытка все исправить

В конце прошлого года Эппл представили новую возможность для авторов, исполнителей и подписчиков своего музыкального сервиса анимированные обложки для отдельных композиций и альбомов. Ранее команда Эппл мьюзик экспериментировала с подобными решениями для плейлистов, но с очередным обновлением iOS распространила эту практику и на полноценные релизы. Пока гифки заметили на одиннадцатом студийнике Pearl Jam под названием Gigaton, и пластинке Detroit 2 рэп-исполнителя Big Sean. Изучить их могут обладатели устройств с iOS и iPadOS 14.3 и выше, плюс macOS Big Sur, начиная с версии 11.1.

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


Дополнительное чтение в нашем Мире Hi-Fi:


Что еще у нас есть в блоге на Хабре:


Подробнее..

Перевод Чему я научился, прожарив 200 лендингов за 12 месяцев

17.05.2021 20:19:35 | Автор: admin


200 стартапов


За последние двенадцать месяцев я прожарил лендинги (посадочные страницы проектов) 200 стартапов. Лендинги инди-проектов, лендинги сейлапов, финансируемых венчурным капиталом, и лендинги прибыльных корпораций, лендинги из различных отраслей и для разной аудиторий. В среднем 25 минут прожарки это больше 3,5 полных дней прожарки страниц для увеличения конверсии.

Что такое прожарка


Каждая прожарка это персонализированный 20-минутный видео-обзор лендинга, где я определял исправления, которые позволят превратить больше посетителей в клиентов.


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

Но что я узнал о лендигах с высокой конверсией? А о ведении бизнеса? И чему вы можете научиться у меня? Получается, довольно многому

Почему я запустил Roast My Landing Page


Roast My Landing Page начинался как побочный проект, связанный с пандемией, чтобы позволить мне поддерживать стартапы на ранних стадиях и одновременно генерировать второй поток дохода помимо моей внештатной маркетинговой работы. В итоге я получил более 70 000 фунтов стерлингов, более 2 000 подписчиков по электронной почте и постоянно растущий список инсайтов о страданиях и проблемах предприятий на ранней стадии и об удивительных людях, которые ими руководят.

Все дело в фаундерах


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

Этот пост для каждого основателя, который поблагодарил меня, бросил мне вызов и (в редких случаях) боролся со мной. Это было круто. Итак, вот что я узнал

9 самых распространенных (и легко исправляемых) вещей, которые упускают из виду фаундеры



Одна цель


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

Как исправить: сфокусируйте свой лендинг на одной цели конверсии.

Акцент на УТП


После заказа прожарки клиентам Roast My Landing Page предлагается заполнить небольшую анкету. Один из вопросов: Что делает ваш бизнес уникальным? Почти каждый основатель смог изящно изложить УТП (уникальное торговое предложение) своего продукта или бизнеса в форме, но только одного из пяти что-то подобное было изложено на их посадочной странице.

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

Как исправить: сравните свой продукт с конкурентами и текущими методами работы.

Четкое и релевантное социальное доказательство


Отзывы, рейтинги, награды или количественные оценки, подтверждающие, что другие люди используют ваш продукт и любят его. Только около у 40% лендингов это находилось в верхней части страницы (то, что люди видят, когда впервые попадают на вашу страницу). И из них только около 50% использовали отзывы, которые описывали боль и преимущества, перечисленные в другом месте лендинга.

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

Простой язык


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

Как исправить: избегайте технических терминов и сокращений, пишите простым языком. Помните, что вы разговариваете с человеком, даже если он покупатель B2B. Спросите себя, может ли 12-летний ребенок понять вашу целевую страницу.

Реальная боль


PAS (боль волнение решение) распространенный метод копирайтинга, используемый для увеличения конверсии. Большинство лендингов касались той боли, к которой они обращались, но только 1 из 15 старались взволновать или усилить переживания посетителя эмоциональным языком и яркими образами. Те, кто сделал это хорошо, создали гораздо более мощные лендинги, которые побудили меня изучить решение.

Как исправить: взволнуйте вашего посетителя, нарисовав яркую картину боли, используя эмоциональный язык, истории и визуальные эффекты.

Ясные преимущества и юзкейсы


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

Как исправить: посетителям не нужно думать, как и почему продукт принесет им пользу. Расскажите и покажите понятным им языком преимущества и примеры использования.

Заметный призыв к действию


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

Как исправить: добавьте контекст в ваш призыв к действию, чтобы посетитель знал, чего ожидать.

Спросить вместо чрезмерного обдумывания


3 из 5 основателей упомянули разочарование из-за того, что не знали, что происходило до прожарки. Они не понимали, почему их лендинг не конвертирует посетителей в клиентов. Однако очень немногие действительно спрашивали об этом своих посетителей.

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

Знание своей статистики


Только 2/5 основателей могли рассказать мне о текущей конверсии своего лендинга. В большинстве случаев эти люди даже не знали, есть ли у них проблема с конверсией на странице, но все равно заказали прожарку. У большинства основателей была установлена система Google Analytics, но у них были ограниченные возможности отслеживания целей или они не просматривали отчеты в течение нескольких месяцев.

Как исправить: настройте аналитику и отслеживание событий. Найдите базовый уровень конверсии для будущих экспериментов.

7 (чуть больше) продвинутых идей для повышения эффективности лендингов


Приблизительно 1 из 4 заказов был прожаркой лендигов скейлапов, где явно использовали высокий уровень экспертизы и навыков для создания посадочной страницы. У этих бизнесов все еще были проблемы с конверсией, которые в основном приходились на следующие 7 областей.

Не сформирована ниша


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

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

Вы предлагаете слишком много или слишком рано


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

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

Вы рассказываете людям то, что можете им показать


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

Показывай, не говори.

Вы не обращаете внимания на сомнения


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

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

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


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

Работайте усерднее, чтобы найти или создать выразительные изображения для лендинга.

Вы не знаете свою статистику


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

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

Вам необходимо регулярно тестировать конверсию


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

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

Что я узнал о построении бизнеса


Как зарабатывать деньги


  • Я получил около 20 000 фунтов стерлингов от прожарки и еще 50 000 фунтов стерлингов в виде внештатной маркетинговой работы от клиентов, которые нашли меня через прожарку.
  • Я потратил около 7 000 фунтов стерлингов на платную рекламу производства и около 3000 фунтов стерлингов на инструменты и другие бизнес-расходы.
  • Недавно я добавил дополнительные услуги переписывание рекламных текстов, перестройка лендинга, внедрение аналитики конверсии. Примерно 1 из 4 моих клиентов по прожарке заказали вторую услугу.
  • Примерно каждый шестой клиент предлагает мне внештатную маркетинговую работу.


Фаундеры и конверсия


  • Наиболее частой причиной заказов: фаундер получил чье-то мнение, основанное на ощущении, что их лендинг не работает или их позиционирование неправильное.
  • Большинство фаундеров не знали о конверсии своего лендинга в моменте, даже если у них была аналитика.
  • Почти каждый фаундер использовал Google Analytics для измерения аналитики сайта, большинство из них установили цели, но многие фактически не анализировали их эффективность.
  • 95% прожарки было заказано фаундерами-мужчинами.
  • Наиболее распространенными типами лендингов были приложения и инструменты SaaS, электронная торговля и B2C.


Конкуренция


  • Около 5 конкурентов создали почти идентичные продукты, явно вдохновленные Roast My Landing Page.
  • Многие заимствовали текст, концепции, призывы к действию, ценообразование и маркетинговые идеи прямо с моего веб-сайта Roast My Landing Page.
  • Другие были вдохновлены, но добавили свои собственные мотивы.
  • Некоторые обращались и просили моей поддержки, обратной связи и совета.
  • Оказалось, что многие из этих проектов закрылись в считанные недели.
  • Я взял за правило не сосредотачиваться на том, что они делают, а вместо этого вкладывал энергию в развитие своего бизнеса. Но друзьям пожаловался.


Сбор отзывов


  • Перед тем как прожарить лендинг, я отправлял клиенту форму с 7 вопросами, на которые нужно было ответить, чтобы они могли задуматься и сосредоточиться, а также дать мне контекст.
  • После прожарки я разослал всем клиентам анонимный опрос Typeform, спрашивая их об одной идее по улучшению прожарки, которую я использовал для уточнения своего предложения.
  • Примерно каждый четвертый заполнил опрос, каждый четвертый отправил отзыв по электронной почте и от каждого второго я больше ничего не слышал.
  • Опрос включал рейтинг из 5 звезд. Из ответивших я получил 46 5-звездочных оценок и 4 4-звездочных.
  • Опрос также содержал вопросы о других сферах их бизнеса, которые основатели хотели бы прожарить это привело к тому, что я создал другие службы.
  • Около 25% клиентов ответили на мои предложения лично.
  • Около 50% фаундеров внедрили исправления, подробно описанные в обзоре. Большинство сделали это сразу же или через несколько недель (или даже месяцев) спустя.
  • Совсем недавно каждый четвертый заказчик попросил меня внести изменения за них.
  • Чем больше я работал на публике, тем больше мне помогали незнакомцы. Люди регулярно присылали мои идеи, исправления, даже свои собственные мини-прожарки несколько раз в неделю.


Как я привлекал клиентов


  • Целевая страница Roast My Landing Page имела различные проблемы с конверсией.
  • Я итерировал целевую страницу около 20 раз, протестировал 3 платежных решения, 4 ценовых диапазона и 5 потоков покупок. Я все еще тестирую это сейчас.
  • Мои самые эффективные маркетинговые каналы это сарафанное радио, участие в сообществах Indie Hackers и Productize, таргетинг в Twitter, таргетинг в Facebook и затем Google Реклама, партнерские отношения.
  • Наилучшая рентабельность инвестиций в рекламу на платной рекламе составила около 3.
  • Худшими маркетинговыми каналами оказались Quora, Reddit, электронная почта через Paved.com. Многочисленные тесты на этих платформах не привели к значительной конверсии.
  • Лучшим способом распространения сарафанного радио было перевыполнение. Я обещаю дать каждую прожарку в течение 48 часов, но многие клиенты получили свое в течение часа после заказа. Это произвело на фаундеров головокружительное впечатление и вызвало немало шума.


Инструменты, которые я использовал


  • Такие инструменты, как Loom, великолепны для записи видео в видео. Но когда им не удается записать промежуточную прожарку, это ужасно. Когда это происходит 3 раза подряд, вы думаете о том, чтобы бросить работу, арендовать небольшую надежную машину, собрать свои вещи и переехать на удаленную ферму подальше от всего и всех, кого вы знаете.
  • Я использовал SPP для управления заказами.
  • Типовая форма для обратной связи с клиентами.
  • Google PageSpeed Insights для определения времени загрузки страницы.
  • Autopilot для моего списка рассылки.
  • Ghost для этого блога.
  • Инструменты аналитики, которые я использовал, включают Hotjar для записей и тепловых карт, Heap для воронок и Google Analytics для высокоуровневых отчетов и показателей конверсии.
  • GetSiteControl помогает мне собирать потенциальных клиентов через мою еженедельную почтовую рассылку.
  • Hotjar помог мне собрать информацию о намерениях выхода.
  • Я использовал для платежей Stripe и Paypal.


Стоимость моего продукта


  • Прожарка начиналась с 39 фунтов стерлингов, поднялась до 299 фунтов стерлингов и сейчас составляет 149 фунтов стерлингов.
  • Я протестировал несколько разных ценовых категорий, чтобы определить, что принесет наибольшую прибыль.
  • Съемка прожарки требует ментальных затрат и чрезвычайно утомляет, поэтому мой лимит составлял около 4 в день.
  • Я перешел к ценообразованию не основанному на времени, поскольку я получил доказательства того, что прожарка увеличивает конверсию.
  • Я все еще изо всех сил пытаюсь привлечь нужных клиентов по правильной цене, не прекращая поддержки клиентов.


Реализованные мной процессы


  • Рутина это хорошо, но я борюсь с ней: еженедельные циклы отчетности и личные ретроспективы помогали мне быть в курсе событий.
  • Да, я проводил ретроспективы, сосредоточившись на том, что я могу улучшить по сравнению с предыдущей неделей.
  • Отчетность помогла мне сосредоточиться, особенно публичное размещение в моем Twitter и подробное описание моих вех на Indie Hackers.
  • У меня также есть небольшое сообщество единомышленников в Slack, с которыми я могу делиться идеями, я несу ответственность перед ними.
  • Сами прожарки относительно произвольной формы. Однако со временем сформировалась общая структура, что позволило сделать акцент на самые большие возможности.


Что же дальше?


Мало того, что Roast My Landing Page приносит прибыль, но и ведение бизнеса приносит мне плоды, которых я не ожидал.

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



Чтобы не терять свои находки по дизайну в тоннах закладок на компе, я создала телеграм-канал Дрын Дезигн. Все клевые и полезные материалы (туториалы, статьи, ссылки на аккаунты клевых чуваков), которые нахожу для себя, я буду постить туда. Угощайтесь.
Подробнее..

Перевод Кори Доктроу Метод Memex

18.05.2021 22:22:31 | Автор: admin
Когда ваша тетрадь с заметками общедоступная база данных

image

Прим. пер.: Я делаю проект Ontol (Github для знаний/мудрости), на который меня вдохновили, в том числе и, мысли Ванневара Буша про Memex. Memex ускоряет в десятки и сотни раз работу ученых, сокращая трение и время доступа к научной информации, Ontol призван в 100 раз сократить трение и время доступа к информации, которая формирует адекватное мировоззрение. (Канал в телеграм: t.me/ontol)

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

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

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

Практически каждое предложение, содержащее слово бренд чушь собачья, и это не исключение.

Тетрадь для заметок


Писатели с незапамятных времен вели записные книжки. Авторский эквивалент альбому для рисования художника это тетрадь для заметок, которая может содержать все, от газетных вырезок до списков продуктов и попыток запечатлеть эти вдохновляющие строчки из ниоткуда.
Я уверен, что где-то там есть писатель, который гораздо более дисциплинирован, чем я, чьи тетради для заметок разборчивы, тщательно проиндексированы и всеобъемлющи. Мои личные записные книжки это нечитаемое, беспорядочное месиво, написанное таким ужасным почерком, что иногда трудно быть уверенным, что это написаны по-английски.

К счастью, почти вся моя писательская жизнь была связана с цифровыми технологиями. Мой отец-компьютерщик познакомил меня с моим первым Apple] [+ в 1979 году, когда мне было восемь лет, и с тех пор я использую цифровые системы, чтобы писать, уточнять и ссылаться на свои тексты.

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

Веб-журнал


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

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

Написание для аудитории делает меня честным.

Зарождение в пересыщенном растворе


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

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

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

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

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

Будьте первым, кто не сделает того, чего раньше не делал никто.

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

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

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

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

Memex


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

Мемекс вдохновлял блогеров с самых первых дней существования своей формы. Дори Смит назвала свой новаторский блог своим резервным мозгом; Давний технический обозреватель Observer Джон Нотон уже 19 лет ведет блог, который он называет Memex 1.1. Я назвал свой блог своим внешним мозгом еще в 2002 году.

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

Хотя я начал вести блог для Boing Boing с помощью инструмента Blogger Pyra Labs, этот формат всегда отличался высокой степенью мобильности, что позволяло легко перейти на Movable Type 6 Apart, а затем на Wordpress Automattic. Когда я покинул Boing Boing в начале 2020 года, было легко экспортировать мои десятки тысяч постов за 19 лет написания и импортировать их на мой собственный частный сайт Wordpress, который я назвал просто Memex.

Мемекс в сочетании с Pluralistic сольным блогом, который я начал после того, как покинул Boing Boing представляет собой обширное хранилище почти всего, что я считаю важным с 2001 года. Когда происходит одно из этих событий зарождения, полнотекстовый поиск и инструменты поиска по тегам, встроенные в Wordpress, позволяют мне вспомнить все, что я когда-либо писал по этой теме, как для освежения памяти в отношении важных деталей, так и для предоставления веб-ссылок для расширения связанных идей.

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

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

Меняйте свои приоритеты


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

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

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

Более десяти лет я возвращался к этому самому дню в истории из моего собственного архива блогов, оглядываясь назад на год, пять, десять лет (а затем, в конце концов, на 15 и 20 лет). Каждый день я откатываю архивы своего блога до сегодняшнего дня в прошлые годы, вытаскиваю самые интересные заголовки и публикую краткие сообщения в блоге со ссылками на них.

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

Повседневная привычка и сообщество


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

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

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

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

Кори Доктороу (craphound.com) писатель-фантаст, активист и блогер. У него есть подкаст, новостная рассылка, страница в Twitter, Mastodon и Tumblr. Он родился в Канаде, стал гражданином Великобритании и сейчас живет в Бербанке, Калифорния. Его последняя научно-популярная книга Как разрушить следящий капитализм. Его последний роман для взрослых Поверхность атаки. Его последний сборник рассказов Radicalized. Его последняя книга с картинками Поэзи, Убийца монстров. Его последний YA-роман Пиратское кино. Его последний графический роман В реальной жизни. Его будущие книги: Вмешательство (совместно с Ребеккой Гиблин), книга о художественном рынке труда и чрезмерной покупательной способности; Red Team Blues, нуар-триллер о криптовалюте, коррупции и отмывании денег; и Утраченное дело, утопический роман пост-GND о правде и примирении с белыми националистическими ополченцами.
Подробнее..

Перевод У каждого приложения должна быть палитра команд

20.05.2021 12:07:50 | Автор: admin
В старых и новых приложениях незаметно начинает появляться инструмент, упрощающий взаимодействие и ускоряющий выполнение действий. Это мощное поле поиска, которое я называю power bar; иногда оно имеет название command palette.

Power bar, похожая на поиск Spotlight в macOS, встраивается в приложение и обычно вызывается сочетанием горячих клавиш CMD+K (или CMD+SHIFT+P). После её вызова пользователь вводит в неё то действие, которое хочет выполнить. Однако в отличие от Spotlight, power bar позволяет выполнять задачи, а не просто искать файлы или переходить в другие части приложения.


Command palette приложения Superhuman.

В таких приложениях, как, например, в клиенте электронной почты Superhuman, power bar позволяет выполнять всё, что можно сделать нажатием на кнопку, не убирая пальцев с клавиатуры. Нажать сочетание горячих клавиш в письме внутри Superhuman, ввести schedule (запланировать), нажать на Enter и ввести next week (следующая неделя) гораздо быстрее, чем искать и нажимать кнопки в интерфейсе, если вы знаете, как пользоваться этой возможностью.

Правильно спроектированная power bar позволяет пользователям перемещаться по всему приложению, не прикасаясь к мыши, а для нахождения задачи она не требует точного совпадения поисковой фразы. При поиске snooze (перенести) или later (позже) вместо schedule (запланировать) должны выдаваться те же результаты, потому что люди используют для одной задачи разные слова, особенно когда ещё не освоили приложение. Самое важное, чтобы в результатах поиска power bar отображались практически все задачи, которые можно выполнить в приложении; таким образом она будет полезна всегда, а не только в отдельных случаях.


Power bar в приложении Visual Studio Code.

В последние годы power bar всё чаще начали появляться во всевозможных приложениях. Я находил их и в инструменте для создания слайд-шоу Pitch, и в календаре Cron, и в более сложных инструментах наподобие Visual Studio Code, системы отслеживания ошибок Linear, и даже в Adobe Photoshop, а также во множестве других мест. Подозреваю, что они появляются повсюду потому, что сегодня подавляющее большинство людей привыкло задавать голосовым помощникам открытые вопросы наподобие Какая погода?, а power bar предоставляют аналог такой функциональности в отдельном приложении.

Строго говоря, power bar не является новой концепцией. Как пишет Мэттью Гуай в Capiche, потребовалось чуть меньше десятка лет для того, чтобы функция, добавленная разработчиком Джоном Скиннером во вторую версию Sublime Text, стала одной из важнейших новых функций программного обеспечения этого десятилетия.


Приложение-календарь Cron использует power bar.

По сути, изначально power bar появилась как инструмент, оптимизированный под опытных пользователей, например, инженеров, не желающих убирать руки от клавиатуры, но теперь начинает появляться повсюду, потому что даёт людям возможность быстрее выполнять их задачи без изучения документации или поисков в Google Search. Ещё важнее то, что она позволяет благодаря текстовому вводу найти горячие клавиши или функции, о которых пользователь даже не знал.

Больше всего в тенденции популяризации power bar меня восхищает то, что она помогает превращать людей в опытных пользователей, знающих, как пользоваться сложными функциями приложений гораздо быстрее, чем если бы им пришлось изучать их самим. Также power bar позволяют не забредать в тупики; если вы обыскали весь интерфейс пользователя, но не нашли нужной функции, power bar поможет вам при помощи простого текстового поиска.

Так как мы создаём и проектируем приложения, которые постепенно становятся всё сложнее, одна из самых сложных задач заключается том, чтобы помочь людям найти мощные функции, о которых они могли не знать. Подобные функции скрываются в меню, за таинственными значками или в раскрывающихся панелях под кнопкой "". Если вы не знаете, где находится то действие, которое вы хотите выполнить, то достаточно просто нажать CMD+K и ввести его, а не заниматься бесконечным щёлканьем.

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

Однако ознакомление людей с возможностями power bar может быть сложной задачей. Пустое поле поиска может выглядеть пугающим, особенно если не понимать, что его можно использовать не только для поиска. Приложения, в которых есть power bar, должны обучать пользователей их возможностям. Например, новые пользователи Superhuman и Cron знакомятся с программой через звонок в Zoom, чтобы они могли освоить эту концепцию.

Но как только люди освоят этот инструмент, они обретут уверенность и, скорее всего, начнут искать power bar в каждом инструменте, считая её стандартным паттерном.

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



На правах рекламы


Наши эпичные серверы хоть и не подходят для майнинга, но могут использоваться для любых других задач. Надёжные серверы на Linux или Windows с мощными процессорами семейства AMD EPYC и очень быстрой файловой системой, используем исключительно NVMe диски от Intel. Попробуйте как можно быстрее!

Присоединяйтесь к нашему чату в Telegram.

Подробнее..

Новый интерфейс банкоматов Сбера

20.05.2021 16:23:11 | Автор: admin
В прошлом посте я рассказывала про дизайн новых банкоматов. Они сильно поменялись по железу, в частности, их экраны стали куда больше, а процессоры позволяют показывать больше графики и анимации без тормозов. Вы много спрашивали про изменения интерфейсов, поэтому я хочу рассказать о работе в этом направлении.

image
Новый главный экран. Здесь отображены наиболее часто используемые суммы и операции на основе истории и привычек клиента

Прежде чем я покажу конкретные примеры, хочу, чтобы вы обратили внимание на следующее:

  1. Речь про интерфейсы новых банкоматов, которые пока что введены в Москве, Санкт-Петербурге и Хабаровске в небольшом количестве, и мы будем их вводить в эксплуатацию по всей России в этом году. Важно помнить, что в нашей сети много предыдущих моделей устройств с прежней версией интерфейса. На всех устройствах мы обновили иллюстрации и анимации в новом бренде и сделали интерфейс чище, убрав основной шум. Но полностью новый интерфейс с обновлёнными сценариями и новым дизайном выкатили только на банкоматах нового поколения.
  2. Текущий интерфейс решает главную задачу упрощение работы с банкоматом. Это означает уменьшение количества шагов внутри операций, более короткие и понятные тексты, реалистичные анимации, привязанные к расположению оборудования в банкомате и персонализацию под частые действия конкретного пользователя.
  3. Это не адаптация текущего интерфейса: мы с нуля разработали новый, проектируя от актуальных потребностей пользователя, то есть тех, что появляются с появлением запросов со стороны клиентов.

И да, мы вынесли самые популярные услуги (снять, внести, оплатить) на экран приветствия, т. е. на тот экран, который пользователь видит в момент, когда ещё не приложил/не вставил карту. А кнопку баланса на главный экран который появляется после авторизации человека в устройстве (приложил или вставил карту, ввёл ПИН-код).

Как шла работа


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

Среди важных изменений новые анимации. Мы проанализировали типичные ошибки пользователей банкоматов и добавили много микроанимаций, показывающих конкретные ожидаемые действия. Например, вот эта анимация призвана переучивать людей вставлять карты: вместо этого лучше их прикладывать. Кстати, у NFC-ридера появилось новое расположение: теперь на нём не получится забыть карту.

image
Под экраном посередине находится ридер.

image

Убрали объёмные руки, которые раньше показывали, как и что нужно делать (кроме экрана со вводом ПИН-кода, там прикрывать рукой клавиатуру важно).

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

Примеры



image
Сократили операцию на один шаг, а также добавили анимацию пересчёта денег.

image

Очень важно было сделать кнопку снятия и внесения до авторизации: было сложно менять системы так, чтобы сначала произошёл запрос действия, а потом авторизация. Это звучит достаточно просто, но с точки зрения ИБ это означало что-то вроде: сломайте всё и постройте заново в стандартах.

image

image

Много работали с контрастом:

image

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

Голос и биометрия


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

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

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

image

Другие языки


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

Коды ошибок были цифрами как приходили, так и отображались. Сто лет назад поменяли.

Где смотреть


Первая партия новых банкоматов появилась в новом офисе Сбера на Цветном бульваре, в Agile Home Сбера на Кутузовском проспекте, а также в офисе на Вавилова, 19. Недавно ещё несколько устройств установили в новых точках в Москве в ТЦ Европейский и ТЦ Авиапарк, а также в Санкт-Петербурге и Хабаровске в нескольких офисах Сбера. Скоро новые устройства появятся по всей стране. Новый банкомат выглядит так:

image

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

Литье пластика со встроенной электроникой (IME) что это, и почему это новый тренд

24.05.2021 12:21:25 | Автор: admin
Источник фото: TactoTek, финская компания, которая развивает технологию IMSE (In-Mold Structural Electronics).Источник фото: TactoTek, финская компания, которая развивает технологию IMSE (In-Mold Structural Electronics).

Вот уже несколько лет производители электроники говорят о новой прорывной технологии, которая изменит привычные нам устройства и подход к их проектированию: никаких больше механических кнопок и переключателей, сокращение толщины до 2 мм, снижение веса на 70%, а себестоимости на 30%. Причем речь идет не о будущих серийных устройствах типа экрана с двойным сложением, который недавно представила Samsung, а о технологии производства, которая уже сейчас используется в автомобилях, бытовой технике и IoT-гаджетах. Эта технология называется литье с интегрированной / встроенной электроникой или In-Mold Electronics (IME).

На Хабре эту интересную тему еще почему-то не затрагивали. Исправляем это досадное недоразумение.

Начнем со спойлера и сразу отметим, что литье со встроенной электроникой (IME) это не какая-то кардинально новая технология, а эволюция техпроцессов, которые уже использовались ранее. Появились более эластичные материалы и более качественные токопроводящие чернила, которые выдерживают формовку при высокой температуре, поэтому проводники, которые раньше покрывали печатную плату, теперь можно наносить прямо на пластиковый корпус электронного устройства. В результате мы избавляемся от жесткой печатной платы в формате 2D и переключаемся на пленочные платы и 3D-электронику с резисторами, микросхемами, сенсорами, антеннами и светодиодами, которые покрывают изогнутые формы корпусов самых разных устройств.

А теперь давайте обо всем по порядку. Литье с интегрированной электроникой это одно из направлений литья с декорированием в форме, о котором мы уже рассказывали на Хабре. В англоязычных инженерных публикациях такая технология называется In-Mold Decoration (IMD). Напомним, что корпус декорируется под давлением прямо в пресс-форме или в процессе выдувного формования.

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

Принцип маркировки в форме (In-Mold Labeling, IML) Источник: Maspi S.r.l.

На схеме выше показана суть технологий IMD и IML:

  1. Сначала на тонкопленочный пластик наносят нужный рисунок текст, декор или текстуру (например, лого фирмы-изготовителя или подписи для кнопок). Это делается за счет трафаретной или цифровой печати. Получается так называемая аппликация.

  2. Аппликацию помещают в пресс-форму для литья.

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

  4. Форма заполняется полимером, и печатная этикетка приклеивается к пластику.

  5. На выходе при раскрытии формы мы получаем готовую деталь пластикового корпуса уже со встроенной графикой.

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

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

В чем разница между декорированием в форме (IMD) и маркировкой в форме (IML)?

Если графика или текстура внутри пресс-формы наносится не на всю поверхность изделия от края до края, а локально, на отдельный участок, то такой тип декорирования называется маркировка в пресс-форме или In-Mold Labeling (IML). С помощью этой технологии можно добавлять цвет, графические элементы и текстурированные области.

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

И вот теперь мы возвращаемся литью с электроникой (In-Mold Electronics), которая стала логическим продолжением предыдущих двух технологий. Похоже, что первое коммерческое внедрение IME было реализовано в инновационной подвесной консоли для автомобиля Ford в 2012 году. Сегодня же IME применяется в производстве бытовой техники, автомобильных панелей, медицинского оборудования, аэрокосмической и носимой электроники.

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

На схеме ниже показано, как это работает:

Источник изображения: Functional Ink Systems for In Mold Electronics by DuPont

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

  2. Термоформование придает печатным носителям трехмерную форму, которая соответствует форме для литья под давлением.

  3. Литье под давлением.

IME, как правило, термоформованные, но не всегда. В областях с сенсорным интерфейсом поверхность может остаться плоской.

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

Пока эта технология еще воспринимается потребителями как новаторская, сами дорожки-проводники выглядят как элементы декора. :-) Со временем промдизайнеры и hardware-стартапы наверняка предложат свежие идеи по использованию возможностей такого литься.

Источник фото: аналитический отчет IDTechEx за 2020 год.

На фото выше серийные устройства и прототипы, созданные по технологии In-Mold Electronics.

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

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

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

Емкостное сенсорное управление и пользовательские интерфейсы

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

Вот, как американская химическая компания Dupont, один из мировых разработчиков токопроводящих чернил для IME, представляет в своей презентации интерфейсы для автомобилей настоящего и будущего:

Источник изображений: Functional Ink Systems for In Mold Electronics by DuPontИсточник изображений: Functional Ink Systems for In Mold Electronics by DuPontИсточник изображений: Functional Ink Systems for In Mold Electronics by DuPontИсточник изображений: Functional Ink Systems for In Mold Electronics by DuPont

Подводим итоги

Автопром это всего лишь одна из многих сфер применения IME, которые мы уже называли выше. Но давайте на ее примере рассмотрим реальный кейс. Возьмем потолочную консоль в автомобиле, которая была спроектирована с использованием печатной платы и классического пластикового корпуса, состоящего из десятков компонентов и сборных деталей, и сравним ее с консолью финской компании TactoTek, которая сейчас разрабатывает свою технологию in-mold structural electronics (IMSE):

Источник фото: Functional Ink Systems for In Mold Electronics by DuPontИсточник фото: Functional Ink Systems for In Mold Electronics by DuPont

Обычная сборка

Версия IME

Сокращение параметра

Вес

650 г

150 г

77%

Глубина сборки

45 мм

3 мм
(без изгиба)

93%

Механические детали

64 штук

2 штуки

96%

Размер PCBA

10 х 4 см

10 х 3 см

25%

Итого, мы получаем значительное уменьшение веса, габаритов, количества подвижных частей и, как следствие, надежности и себестоимости устройства в целом. Судя по активным разработкам в этой теме и отчетам аналитиков, которые прогнозируют рост внедрений IME, начиная с 20232024 года, на рынке электроники намечается новый тренд переход от печатных плат в коробке к трехмерной структурной электронике. Так что если ваша работа связана hardware, можно присмотреться к этому направлению и успеть попасть на гребень волны. Надеемся, что мы вскоре сможем поделиться с читателями Хабра собственными кейсами по разработкам и запуску производства литой электроники.

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

Подробнее..

Интеграция Shopify и MailChimp

25.05.2021 16:13:10 | Автор: admin

Shopify сервис, который позволяет без знаний программирования создать свой интернет-магазин. В нём можно модифицировать внешний вид магазина, добавлять товары, посты для блога, подключить биллинг. А поскольку развитие e-commerce трудно представить без email-маркетинга, Shopify даёт возможность использовать разные сервисы рассылки.

Предположим, увас уже есть свой магазин, созданный вShopify. Самое время заняться email-маркетингом. Мырасскажем обинтеграции Shopify иплатформы MailChimp.

Как подключить MailChimp кShopify

Процесс интеграции MailChimp иShopify достаточно простой, всё подключение можно сделать через приложение ShopSync. Влевом меню сервиса выбираем Apps, нажимаем наVisit the Shopify App Store.

Вводим впоиске ShopSync иустанавливаем приложение.

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

Всё, аккаунт подключен его можно настраивать.

Выбираем список, куда попадут подписчики, и тег, который передаётся при подписке. Некоторые вещи можно настраивать как в Shopify, так и в MailChimp. Например, включение письма-подтверждения. Его можно включить/отключить как в настройках приложения, так и в настройках списка в MailChimp. Но удобнее, конечно, всё делать в одном интерфейсе.

Особое внимание стоит обратить насинхронизацию Merge Tags. ВMailChimp это дополнительные поля, куда передаются данные оподписчике. Например, его имя, пол, возраст. ВShopify тоже есть такие поля, иважно настроить корректную передачу значений изShopify вMailChimp. Для этого просто смотрим, какие поля чему соответствуют. Если необходимо, меняем значения.

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

Проверяем, как прошла интеграция вMailChimp. Всервисе для отправки рассылок заходим вAccount, враздел Integrations. Нам нужна кнопка View Connected Sites.

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

Интеграция готова, можно начинать работать срассылками.

Что можно делать вMailChimp после интеграции

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

Какие письма можно создать после первой интеграции

  1. Спасибо запервый заказ.

  2. Награда для лучшего покупателя.

  3. Брошенная корзина.

  4. Брошенный просмотр.

  5. Письма озаказе.

  6. Опрос после заказа.

  7. Возврат подписчиков, которые давно ничего непокупали.

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

Настройка рассылок

Для настройки новой рассылки создаем новое письмо, выбираем тип Automation, раздел E-Commerce. Там будут все письма, которые можно сделать сучётом нашей интеграции.

Выберем Abandoned Cart Email один изсамых популярных триггеров для e-commerce. Наследующем шаге нам предложат выбрать магазин. Опция актуальна, если увас несколько магазинов снастроенной интеграцией вMailChimp.

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

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

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

Здесь мало настроек:

  • можно поставить от1до3товаров;

  • убрать или поставить цену (остальные элементы убирать нельзя);

  • можно редактировать стиль текста исам текст.

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

Сохраняем рассылку изапускаемеё, как обычную автоматическую цепочку. Платформа может посчитать прибыль списьма, нолучше доверять информации изGoogle Analytics.

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

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

Настройка формы подписки

После интеграции сShopify винтерфейсе MailChimp можно настроить форму подписки, которая будет собирать лиды насайте. Для этого заходим внужную аудиторию, нажимаем Manage Audience Sign Upforms.

Выбираем раздел Subscriber pop-up.

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

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

Если всё же понадобится кастомная интеграция e-commerce магазина и MailChimp, то её можно реализовать через сервис Mandrill специальную надстройку для MailChimp, которая позволяет отправлять триггерные рассылки. Настроить её без знаний кода не получится это тема для отдельной статьи. Просто помните, что, если при реализации триггеров нельзя отступать от определённого дизайна, возможность кастомизации в этом методе настройки всё-таки есть.

Итак, если высоздали интернет-магазин всервисе Shopify, одним изсамых простых способов запустить email-рассылку отимени этого магазина станет интеграция Shopify сплатформой MailChimp.

После настройки совместной работы этих сервисов высможете:

  • настраивать рассылки прямо винтерфейсе магазина;

  • быстро собирать данные, необходимые для создания транзакционных писем;

  • создавать транзакционные письма (например, оброшенной корзине или оповещения озаказе);

  • спомощью дополнительных сервисов кастомизировать рассылки.

Подробнее..

Figma плагины для продуктового дизайна. Локальный топчик с видео-инструкцией

25.05.2021 16:13:10 | Автор: admin

Для Figma написан целый легион плагинов навсе случаи жизни. Постоянно появляются рейтинги итоп-листы супер-пупер-мега-лучших. Ноэтот инструмент используют люди разных конфессий, решая разные свои задачки. Рыцари фриланса рисуют лендинги, студийные братья собирают промо-сайты, еретики даже визитки иплакаты пытаются делать вFigma. Идля всех есть свои плагины. Поэтому делать общий топ-100 пустое занятие.

Номожно накидать локальный местечковый топчик для продуктового дизайнера например. Внём небудет плагинов вдухе смотрите, какая любопытная идея или если вдруг вам когда-нибудь понадобится заменить все картинки нафото Николаса Кейджа. Только ежедневные трудяги. яуверен, этот список будет полезен нетолько UI-дизайнерам исочувствующим. Что-то полезное найдут для себя ивсе остальные фанаты Figma.

В конце статьи будет ссылка на видео-инструкцию.

Иерархия библиотек вOzon

Яслужу рядовым разработчиком интерфейсов вOzon, где наша маленькая, ногордая команда занимается внутренними продуктами компании. Всяческие админки иCRM-ки. Впрочем, идоосновного сайта мыдотягиваемся.

Работа внашей команде строится последующей схеме: для каждой Job или User Story мыделаем отдельный файл сэлементарным линейным сценарием. Там мысобираем экраны, пройдя которые пользователь решает свою задачу. Втаких сценариях, конечноже, появляются повторяющиеся паттерны, которые можно переиспользовать вдругих User Story иони достойны переноса вотдельную сценарную библиотеку. Этот подход позволяет нераздувать файлы, держать всю систему под контролем идостаточно свободно вносить правки, затрагивающие множество сценариев.

Сейчас унас вOzon есть несколько типов библиотек:

  • Атомарные токены дизайн-системы.

  • Молекулярные библиотеки сэлементами интерфейса. Изних собираются экраны сценариев.

  • Сценарные библиотеки, вкоторые попадают проектные организмы. Оттуда мыможем централизованно использовать ихвдругих сценариях. Повторюсь, разговор нетолько про сайт ozon.ru компании нашего масштаба имеют огромное количество внутренних продуктов, которые также подчиняются единой дизайн-системе.

Библиотечная иерархияБиблиотечная иерархия

Рабочие лошадки иудобные пони

Нохватит зауми! Вперёд кхит-параду. Ида, тут будут представлены иплатные сокровища, ночто значат деньги, когда дело касается Продукта иПродуктивности.

Master

Community

Этот плагин достоин носить джедайское звание Мастер. Сложно переоценить, сколько времени онсэкономил нашей команде. Яуже рассказывал онём насвоём YouTube-канале, асегодня подчеркну его полезность для продуктовой работы. Мало того, что онумеет перелинковывать инстансы кновому мастер-компоненту, сохраняя все оверрайды, так онещё может делать это сбиблиотечными компонентами.

Тут унас типичная ситуация. Форма собрана измолекулярных библиотечных компонентов. Спроектированы разные её состояния. Становится понятно, что она достойна быть добавленной всценарную библиотеку. Если делать это штатными средствами, придётся перенастраивать кучу экранов. Ноунас есть Master.

Копируем одну изформ ивставляем её всценарную библиотеку. Делаем компонент ипубликуем. Запускаем команду Pick Target Component изарсенала плагина Master. Возвращаемся вфайл сценария ивыделяем все наши формы. Запускаем команду Link Objects toTarget Component.

Дапребудет стобой сила, Master!

Design System Organizer

Community

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

Тут унас локальные цветовые итипографские стили. Надо привязать ихктакимже библиотечным. Идём вбиблиотеку изапускаемDSO. Заходим вцветовые стили, выделяем нужную группу ивыбираем извыпадающего меню Set AsTarget. Возвращаемся внаш файл, запускаем DSO ивыбираем Relink Styles. Бум! Стили теперь тянуться изкомандной библиотеки. Такимже образом перелинковываем другие стили или компоненты.

Style Organizer

Community

Этот штепсель помогает неударять вгрязь лицом перед разработчиками. Проверяем, откуда тянутся стили. Ловим нестильные шейпы итексты. Чиним вручном или автоматическом режиме. Соответствуем высоким стандартам разработки Ozon иублажаем личного беса-перфекциониста.

Вот тут унас типичная ситуация. Наглазок всё впорядке, нотакли это? Стартуем Style Organizer. Ивидим, что один изчёрных квадратов имеет локальный стиль, второй библиотечный, атретий вообще без стиля. Можно пробежаться посписку ошибок вручном режиме, сшивая стили, аможно нажать Auto Fix Color иStyle Organizer будет действоватьсам.

Similayer

Community

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

Давайте выделим слово Zen синего цвета, вне зависимости отстиля текста. Выделяем один синий Zen изапускаем Similayer. Выбираем параметры Fill Style иText Characters.

Удобненько!

Instance Finder

Community

Ищет ивыделяет только инстансы. Зато делает это шустрее Similayer иработает повсему документу, анепоодной странице.

Выделяем мастер или любой изинстансов изапускаем поиск. Можно сразу выделить все найденные настранице инстансы.

Select Layers

Community

Ещё один незаменимыйвыделятель. Чаще всего ловлю им слои по названию (он поддерживает частичное вхождение запроса). В отличииотSimilayer, SelectLayersне требует выделять образец для поиска соответствия и, что крайне важно, может искать только в выделенном.

Вот тут унас мега-вариант инпута. Выделяем поля пароля изапускаем плагин. Пишем название нужного слоя ивуаля! Можем поменять иконку, например.

Sorter

Community

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

Если попытаться пронумеровать экраны, нерасставив ихвпанели слоёв, получим хаос. Нуок. Выделяем все экраны, запускаем команду Sort Position ипосле этого уже штатный Rename Selection.

Порядочек.

Quantizer

Community

Расставляет элементы всетку сзаданным количеством колонок иотступами. Сильно помогает вработе над вариантами.

Выделяем, что нужно, истартуем Quantizer. Сделаем колонки сотступами по40px.

Кстати, вызнали, что можно таскать объекты всетке закруглые маркеры вцентре? Аменять отступ, хватаясь замаркеры между? Если делать это сShift, шаг будет кратен вашему Nudge Amount.

Swap

Community

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

Выделяем два объекта, запускаем команду Swap и, собственно, всё.

Layer Counter

Community

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

Если снять галку Include Nested Layers, увидим только количество выделенных фреймов.

Retextifier

Community

Может массово заменять текст ввыделенных блоках. Ноесть досадный недочёт при работе вWindows лишний перевод строки, скоторым можно бороться внешними средствами, заменив символ \n на\r или прогнав текст через сам плагин.

Замечательный инструмент, если умеешь импользоваться иутебя macOS.

НаmacOS: копируем текст, например, колонку изGoogle-таблицы. Выделяем целевые текстовые слои изапускаем плагин. Вставляем текст комбинацией Cmd+Shift+V.

Если увас Windows, действуем немного сложнее. Сначала вставляем скопированный текст вфайл Figma. Выделяем его, запускаем Retextifier, копируем итутже вставляем текст, жмём Change. Копируем изменённый текст, далее действуем как наmacOS. Надеюсь, автор плагина что-то придумает поповоду этого недоразумения.

Copy and Paste Text

Community

Вотличие отпредыдущего, этот плагин вставляет вовсе выделенные слои одинаковый текст избуфера. Безусловно полезно.

Копируем нужный текст, выделяем целевые слои, запускаем команду Paste Text

Find & Replace

Community

Поиск изамена потекстовым слоям споддержкой регулярных выражений (Regex). Для тех, кто умеет врегулярки ипонимает, как это круто.

Сейчас мыпоменяем местами буквы ицифры. Запускаем плагин, включаем поддержку Regex ипишем регулярное выражение. Найти (.*)-(.*) изаменить на$2-$1.

Мистика!

Nisa Text Splitter

Community

Разрезает текстовый блок настроки, сортирует, сшивает, расставляет буллиты имногое другое. Рекомендую.

Давайте расставим фильмы похронологии. Запускаем Nisa Text Splitter ирежем наш блок настрочки. Сортируем поалфавиту Sort byalphabet исшиваем обратно водин блок Join text. Внутри плагина ещё много другой годноты. Например, сразу делать Auto Layout изнарезанного текста.

Change Text to Layer Name

Community

Несамый необходимый штепсель, ночастенько выручает. Меняет текст наназвание слоя. Использую всвязке соштатным Rename Selection.

Выделяем текстовые блоки, применяем Rename Selection, оставляем старое название, добавляем кнему дефис иномер. Запускаем команду Change Text toLayer Name.

Математично!

Data Roulette

Community

Когда работаешь над продуктом, утебя есть постоянно используемые наборы данных. Эти наборы накапливаются икочуют изпродукта впродукт. Data Roulette позволяет хранить ихвGoogle-таблицах ирандомно заполнять ими макеты. Итекстами, ифотками.

Делаем Google-таблицу. Линк нанеё добавляем вData Roulette. Называем целевые слои всоответствии сназваниями колонок таблицы поставив вначало решётку. Можно сделать это вмастер-компоненте. Помере необходимости добавляем вGoogle-таблицу новые колонки.

Рулетка рулит!

Content Reel

Community

Для того, кому лень возиться сGoogle-таблицами, Microsoft наплагинил Content Reel. Только нужно залогиниться. Тогда можно будет создавать свои наборы данных.

Тут всё просто. Выделяем целевые слои, выбираем свой или чужой набор данных, вставляем.

Copypasta

Community

Очень часто нужно что-то добавить навсе экраны сценария. Водно итоже место. ИCopypasta прекрасно решает эту задачку.

Выделяем нужную деталь, запускаем Copypasta, жмём Save selection, выбираем целевые экраны, Duplicate Layers.

Шикарно.

Safely Delete Components

Community

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

Safely Delete Components удаляет неиспользуемые мастер-компоненты. Ноэтот плагин нужно использовать состорожностью. Нестоит запускать его вбиблиотеках.

После переноса компонентов всценарную библиотеку, выделяем компоненты локальные изапускаем Safe Delete.

SBOL-Typograph

Community

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

Божечки-Ёжечки!

Хорошо, ногдеже тот самый плагин?

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

Всем удачи напродуктовом фронте!

P.S.: Видео-версию статьи можете посмотреть намоём YouTube-канале.

P.P.S.: Ясерьёзно про комментарии.

Подробнее..

Почему клавиатура всегда быстрее мыши

27.05.2021 10:19:54 | Автор: admin

Тепловая карта с клавиатуры высокоинтеллектуальных программистов, источник: r/ProgrammerHumor/

Много говорилось об удовольствии, которое испытываешь при работе в консоли. Это не случайно: так задумано отцами-основателями Unix. Возникает странное ощущение, что это самый правильный способ взаимодействия с компьютером.

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

В чём же дело?

Экзотический манипулятор


Изначально трекболы использовались для особых профессиональных приложений: например, для систем управления радарами. Мышь как перевёрнутый трекбол, накрытый коробкой, придумали в 1980-е годы. В то время программисты не совсем понимали, зачем компьютеру мышь, если код пишется в виде машинных команд, а взаимодействие с мейнфреймом целиком происходит в консоли.

Необычные манипуляторы с колёсиком стоили в районе 400 долларов. Затем вышел революционный компьютер Apple Lisa один из первых ПК с графическим интерфейсом. Компания Apple демпинговала она снизила стоимость манипулятора до 25 долларов и сделала сексуальный дизайн с одной кнопкой. Мышь из профессионального аксессуара превратилась в массовый гаджет.


Apple Lisa. Очень элегантный дизайн для своего времени

С тех пор мышь и GUI стали прочно ассоциироваться с компьютерами Apple и модным оконным интерфейсом.

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

Геймеры вечно недовольны текущей производительностью персональных компьютеров и непрерывно требуют от индустрии наращивать мощность железа. Если посмотреть, кто собирает самые производительные конфигурации ПК и покупает самые мощные версии десктопных процессоров, то это будут сотни любителей рекордных FPS, парочка учёных с машинным обучением и один программист, который каждый день что-то билдит и компилирует. Да и то, трём последним персонажам компьютер нужен конкретно для работы, так что они не всегда вкладываются собственными деньгами, как геймеры.

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

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

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

Крутые однострочники


Вот некоторые примеры интересного использования программ Linux.

ps aux | convert label:@- process.png

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

Примечание. Утилита convert входит в пакет ImageMagick, так что нужно сначала его установить.

А вообще, текст из консоли можно быстро запостить через интернет-сервис вроде termbin.com (это как pastebin, только для консоли):

ps aux | nc termbin.com 9999

Как обычно, с алиасом для частого использования:

alias tb='nc termbin.com 9999'

Следующая:

curl ipinfo.io

Это если хотите узнать свой внешний IP-адрес через сервис ipinfo.io.

git log --format='%aN' | sort -u

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

history | awk '{print $2}' | sort | uniq -c | sort -rn | head

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

ls -d */

Листинг только директорий. Полезная команда, которой тоже хорошо бы присвоить алиас для быстрого использования.

du -hs */ | sort -hr | head

Эта команда показывает только 10 крупнейших директорий в текущем каталоге.

ss -p

Просмотр, какие приложения потребляют трафик (утилиты iftop и nethogs дают более подробную информацию).

rm -f !(test.txt)

Команда удаляет из директории все файлы, кроме одного, указанного в скобках. Это работает после включения расширенной глобуляции в баше (shopt -s extglob).

python3 -m http.server

Запускает http-сервер и начинает отдавать файлы. Удобно, если хотите пошарить какой-то html-файл по сети.

screen -S the-screen-name

Создание экран-сессии.

screen -x the-screen-name

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

Утилита screen поставляется по умолчанию со многими дистрибутивами Linux, хотя не со всеми.

alias copy='xclip -i -selection clipboard'

cat file.txt | copy

Копирование файла в буфер обмена, когда первый однострочник прописан как алиас copy в баше.

sudo !!

Запустить последнюю команду под рутом, если в предыдущей команде вы забыли набрать sudo. У этой команды первое место в рейтинге однострочников.

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

Горячие клавиши как наследие консоли


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

Алиасы bash служат той же цели: выполнить команду с наименьшим количеством усилий, то есть с наименьшим количеством нажатий клавиш.

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

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

Это фундаментальное преимущество клавиатуры как инструмента для ввода команд по сравнению с любыми манипуляторами. В этом же и сила консоли.

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

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

Ну а окошки и другие элементы графического интерфейса Windows, по мнению Apple, это вторичный продукт, скопированный с интерфейса Lisa (см. судебный процесс Apple против Microsoft c 1988 по 1994 гг).

Суд отклонил иск Apple к Microsoft. Но некоторые вещи обращают на себя внимание. Например, команда open . в консоли macOS открывает Finder в текущей директории. В Windows то же самое делает команда start . (Finder здесь называется Explorer). Окна в macOS закрываются крестиком в левом верхнем углу, а в Windows в правом углу. Возможно, на примере таких деталей Билл Гейтс доказал суду, что у него оригинальный графический интерфейс, который сильно отличается от macOS.

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



На правах рекламы


Наша компания предлагает аренду VPS для совершенно любых проектов. Создайте собственный тарифный план в пару кликов, максимальная конфигурация позволит разместить практически любой проект 128 ядер CPU, 512 ГБ RAM, 4000 ГБ NVMe!

Присоединяйтесь к нашему чату в Telegram.

Подробнее..

Перевод 6 способов снизить когнитивную нагрузку от интерфейса

27.05.2021 12:14:32 | Автор: admin

Усталость от принятия решений это популярный термин, описывающий случаи, когда человек за определенное время принимает слишком много решений. Исследования показывают, что причина этого явления в исчерпании когнитивных ресурсов именно поэтому после 30минут поисков на Нетфликсе чего-то нового вы в итоге смотрите давно знакомый Офис: ваша способность принимать решения снизилась, и мозг сдался (хотя это и неплохое шоу).

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

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

В этой статье рассматриваются шесть способов снизить когнитивную нагрузку в UX-проекте.

1. Чем реже нужно делать выбор, тем лучше

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

Если у пользователя слишком много вариантов выбора, он легко сбивается с толку и раздражается. У продукта могут быть все необходимые функции, но если интерфейс чересчур запутан из-за чрезмерного количества возможностей, он становится неудобным. В опубликованном в журнале Journal of Personality and Social Psychology исследовании говорится, что такая ситуация часто вызывает паралич принятия решений и раздражение. [1]

Модель из статьи в Harvard Business ReviewМодель из статьи в Harvard Business Review

В погоне за повышением числа начальных (или повторных) продаж компании могут включать в свои продукты слишком много (или слишком мало) функций. Используя модель, предложенную в Harvard Business Review, можно найти золотую середину в зависимости от желаемого результата.

Фото Charles Deluvio, площадка UnsplashФото Charles Deluvio, площадка Unsplash

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

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

В сфере UX есть множество мифов о том, сколько кликов нужно использовать и как много информации человеческий мозг может воспринять за раз. Самая главная задача UX-дизайнеров найти баланс между простотой и функциональностью: чтобы, с одной стороны, облегчить пользователям работу, а с другой не заставлять слишком много обдумывать принимаемые решения.

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

В недавних исследованиях было показало, что людям нравятся меню со множеством вариантов: чем вариантов больше, тем лучше, поскольку не приходится искать нужную информацию во вложенных меню. Веб-сайты и приложения, которые представляют данные визуально, например, Amazon с почти 90категориями на главной странице, оказываются удобнее, чем те, что предлагают небольшое число вариантов (например, категории без подкатегорий).

Amazon на главной странице дает пользователям много вариантовAmazon на главной странице дает пользователям много вариантов

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

Отличная иллюстрация информационного запаха от NN GroupОтличная иллюстрация информационного запаха от NN Group

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

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

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

Если пользователь сделал ошибку, дайте возможность легко вернуться назад

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

Ответ прост: нужно дать возможность легко вернуться туда, откуда пользователь начал.

Да, иногда найти необходимое бывает не так уж и просто! Фото Daniel Mingook Kim, площадка UnsplashДа, иногда найти необходимое бывает не так уж и просто! Фото Daniel Mingook Kim, площадка Unsplash

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

Хороший пример страница с ошибкой 404: наверняка каждому из нас приходилось натыкаться на нее. Согласитесь, неприятно не найти то, что искали. Исправить ситуацию можно, добавив кнопку назад, которая вернет пользователя туда, где он был до того, как попытался перейти по ссылке, приведшей в никуда.

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

Missguided использует эту возможность и помогает найти нужное или открыть для себя что-то новоеMissguided использует эту возможность и помогает найти нужное или открыть для себя что-то новоеVero Moda тоже хорошо справляется с задачей: заметное поле поиска и популярные категорииVero Moda тоже хорошо справляется с задачей: заметное поле поиска и популярные категорииBirchbox также помогает открыть что-то новое для себяBirchbox также помогает открыть что-то новое для себя

При разработке пути пользователей я использую следующие рекомендации:

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

  • Должно быть легко найти и исправить ошибку, а затем продолжить использование продукта.

  • Предотвращайте неправильный ввод данных: сохраняйте их до того, как ошибка испортит пользователю впечатление.

  • Не показывайте сообщение на всю страницу укажите, в каких полях ошибка.

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

3. Визуальные подсказки для навигации

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

Фото Fab Lentz, площадка UnsplashФото Fab Lentz, площадка Unsplash

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

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

  • Упрощает обзор и чтение страницы.

  • Улучшает визуальную иерархию.

  • Улучшает навигацию по странице.

  • Существенно повышает коэффициент конверсии.

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

Все изображения принадлежат институту CXLВсе изображения принадлежат институту CXL

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

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

Изображение институт CXLИзображение институт CXLИзображение институт CXLИзображение институт CXL

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

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

4. Снижение когнитивной нагрузки посредством знакомых шаблонов и условностей

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

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

Согласованная цветовая схема.

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

Фото Balzs Ktyi, площадка UnsplashФото Balzs Ktyi, площадка Unsplash

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

Повторение в шаблонах проектирования и условностях.

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

  • вашим продуктом станет удобно пользоваться, потому что в нем не будет ничего нового (это снижает когнитивную нагрузку);

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

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

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

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

Значки удобное средства указания на действие или объект в приложении. Их легко распознать, поэтому они идеально подходят для быстрого взаимодействия. Добавление привычных каждому значков и символов поможет упростить ориентирование в приложении.

Фото Sebastian Herrmann, площадка UnsplashФото Sebastian Herrmann, площадка Unsplash

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

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

5. Делайте интерфейс для пользователей, а не для себя или своей компании

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

Фото Amlie Mourichon, площадка UnsplashФото Amlie Mourichon, площадка Unsplash

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

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

При этом можно задавать такие вопросы:

  • Что больше всего понравилось в нашем последнем продукте?

  • Как бы вы отнеслись к изменению функции X?

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

Есть несколько методов исследования UX, которые помогут держать пользователей в центре внимания:

  • Надлежащее исследование рынка.

  • Использование персонажей пользовательских ролей.

  • Макеты и прототипы для получения быстрой обратной связи.

  • Регулярное общение с собственной службой поддержки.

И этот список, конечно, далеко не полный

6. Стремитесь к простоте не перегружайте пользователей большим количеством вариантов и функций одновременно

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

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

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

Изображение UsabilityHubИзображение UsabilityHub

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

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

Заключение

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

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

Помогли ли вам приведенные в статье советы? Расскажите в комментариях ниже или напишите мне на почту alexander@radahl.no.


О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Подробнее..

Как и зачем Mail.ru Group провела редизайн мобильной версии главной страницы портала

04.06.2021 16:20:58 | Автор: admin


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

Как было раньше


Старая версия мобильной главной в течение нескольких лет полностью решала те задачи, которые от нее ждали. Пользователи легко перемещались между вкладками, без труда находили Почту, Поиск и Новости. Однако появление новых продуктов Mail.ru Group становилось все большим вызовом интегрировать их в текущую версию получалось сложнее, появлялась разрозненность между блоками. Например, строку Поиска или окно входа в Почту стали замечать хуже, падала глубина скролла страницы, а пользователи уходили с середины новостной ленты.


Старая мобильная версия главной страницы Mail.ru

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

План выглядел так:

  • Изменить визуальный стиль главной страницы, опираясь на новую дизайн систему Mail.ru;
  • Сделать доступ ко всем сервисам удобным и быстрым;
  • Добавить навигации по странице развлекательный характер за счет индивидуальных рекомендаций материалов и способов их оформления;
  • Сохранить видимость всех продуктов и учесть интересы тех, на которые пользователи чаще всего переходят с главной страницы Почты,Поиска и Новостей;
  • Адаптировать изменения под устройства с маленькими экранами, чтобы каждому пользователю было комфортно.

С чего начали


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

Для начала мы решили направлять внимание пользователя на важные элементы только визуальными инструментами.


Первые UI варианты страницы

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

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


Новая лента

Например, для Кино Mail.ru сделали темную подложку так мультимедийный контент удобнее воспринимать. Для игр добавили большие карточки с обложкой, на которых заметны обновления. Телепрограмме добавили удобное переключение между каналами, чтобы пользователю было проще найти передачи, которые его интересуют. Еще мы недавно внедрили Пульс персональную ленту рекомендаций. На новой главной мы немного изменили ее стиль, добавили темный фон, что увеличило кликабельность.

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

Изменение UX страницы


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


Варианты главной страницы для UX исследований

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

  • Поиск разместили сверху, так как он означает начало изучения страницы, и такое расположение в целом более привычное для пользователя;
  • Почту расположили под Поиском в виде виджета, чтобы человек не тянулся постоянно наверх. В дальнейшем мы будем выводить не только виджет Почты, но и календарь, Облако и социальные сети. Так пользователь сможет быстро и удобно переключаться между задачами и продуктами. Ниже расположили основную информацию на день: погоду, котировки и новости;
  • В процессе работы Погоду и котировки мы меняли местами с виджетом Почты. По итогам тестирования выбрали вариант, когда погода была ниже и не разделяла Поиск и Почту. Поменяли расположение рекламы;
  • Убрали акцентный цвет и сделали страницу максимально чистой.

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

Новости остались на том же месте, но мы немного поработали над самим блоком: изменили количество новостей (необходимость этого также показали тесты), добавили отступы между материалами и увеличили размер шрифта. В ленту добавили Пульс, сделав ее бесконечной, поэтому футер перенесли в бургер меню вверху слева так мы получили место для других проектов Mail.ru Group без потерь для дизайна и пользователя.

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

Для дальнейшей разработки дизайна был выбран вариант с лучшим результатом после тестирования в лаборатории, где:

  • Наверху расположен навигационный блок с меню, геолокацией и профилем;
  • Поиск выше Почты, а Погода рядом с Новостями;
  • Меньше акцентного цвета (синими остались только логотип и Поиск).

Финальные штрихи


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

У нас было несколько вариантов с разными формами и деталями. В итоге страница стала чистой: белого цвета с грамотно забрендированными ключевыми блоками. Фирменный цвет органично выделял Поиск, Почту и Новости. Строку Поиска сделали закругленной, чтобы она сильнее выделялась и не сливалась с виджетами ниже. Погоду и котировки разделили горизонтальные блоки более адаптивны и позволяют добавлять новые элементы.


Добавление виджетов

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


Сравнение старого и нового дизайна мобильной версии главной страницы Mail.ru

Как новая главная живет и процветает


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



В результате мы заметили такие изменения:

  • +12% к переходам на медиапроекты, включая погоду и ковид;
  • +4% к переходам в Поиск;
  • +5% к переходам в Почту.

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

Состав творческой группы:

  • Алена Китабова менеджер продукта.
  • Вячеслав Яшков руководитель команды дизайна Search & AI.
  • Елена Джуга дизайнер Search & AI.
  • Игорь Фролов руководитель группы frontend-разработки главной страницы и портальной навигации.
  • Владимир Францкевич программист группы frontend-разработки главной.
  • Денис Стасьев младший программист группы frontend-разработки главной.
  • Александр Буки программист группы frontend-разработки главной.
  • Анастасия Краснова ведущий инженер по тестированию.
Подробнее..

Как подобрать дизайнера для проекта?

05.06.2021 22:17:23 | Автор: admin

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

Я постаралась систематизировать в этой статье свой опыт подбора множества дизайнеров на проекты самой различной сложности: от пакета баннеров, лэндинга до интерфейса No-code платформы без ТЗ. Материал будет полезен тем, кто впервые подбирает дизайнера на проект или получает дизайн не того качества, которого хотелось бы.

Поймите - кто конкретно вам нужен

Соревнование / Irina SalvartСоревнование / Irina Salvart

Дизайнеры, как и программисты все - разные. Как 1С-программист не напишет вам CMS на Python, так и дизайнер лэндингов не сделает прототип CRM, которым будет удобно пользоваться.

Запомним следующее:

  • UX дизайнер/UX инженер/UX аналитик: занимаются разбором требований, пишут ТЗ, создают CJM и, иногда, прототипы.

  • UI дизайнер: создает дизайн на базе прототипа, ТЗ, CJM и прочей информации. Часто заказчики поручают разработку сложных продуктов с нуля UI дизайнеру, и это самые большие грабли, которые только можно представить.

  • У дизайнера часто есть специализация. Мой коллега, который делает только интернет-магазины, прокачал себя в этом настолько, что конверсия его работ высока в любой тематике, за которую он бы ни взялся - практически без предварительного анализа. Однако, графический дизайн простой презентации способен отнять у него массу времени и энергозатрат.

В итоге, если вам нужен простой лэндинг - для него, как правило, хватит и UI дизайнера с ТЗ в зубах. Если нужен прототип CRM, упаковка стартапа - ищем жесткого аналитика, UX инженера с опытом разработки подобных решений.

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

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

Внимательно изучите портфолио дизайнера

Наброски / Irina SalvartНаброски / Irina Salvart

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

Насколько работы похожи? Не раз видела портфолио дизайнеров, где 3-5-7 магазинов подряд являются просто перекрашенными версиями друг друга. С таким дизайнером новую кашу не сваришь.

Есть ли работы, схожие по направленности с вашей? Планируете делать магазин? Не поручайте его дизайнеру, у которого 10 баннеров, 3 лэндинга и 1 сайт услуг. И не верьте тому, кто скажет разберусь. Интернет-магазины подразумевают множество специфики, которую нужно сначала понять, прожить, выстрадать, а потом уже применять.

Какие используются шрифты? Часто начинающие дизайнеры грешат тем, что выбирают или неудачные, нечитаемые шрифты, от которых режет глаз, или просто вставляют стандарт в виде Arial по всем макетам. И то, и другое - повод отказать.

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

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

Как с адаптивностью работ? Удивительно, но в 2к21 некоторые дизайнеры делают мобильные версии по остаточному принципу, хотя мобайл - это отдельная и сложная разработка. Посмотрите, делает ли дизайнер мобильные версии своих сайтов, насколько они удобны в использовании, не грешат ли они слишком малым/слишком большим количеством информации на экран. Если мобильных версий нет вовсе - право слово, не стоит.

Что с цветами? Если в проекте больше 3-4 цветов, или цвета спорят за внимание - в 99% случаев перед вами колхоз. Также следует обратить внимание на то, выделены ли CTA элементы (например, кнопки Купить, Заказать, Перезвоните мне) отдельным, контрастным цветом? Если да - это хороший знак. Планируя проект на большую аудиторию - помните, что далеко не все люди умеют правильно различать цвета, и дизайнер с соответствующим опытом будет очень полезен в таком деле.

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

Попросите верстальщика посмотреть один из проектов дизайнера

Ты и твой парень-геймер / Irina SalvartТы и твой парень-геймер / Irina Salvart

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

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

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

Не стесняйтесь спрашивать рекомендации

Всегда за / Irina SalvartВсегда за / Irina Salvart

Конечно, если вам нужны баннеры или обложка для социальной сети - в рекомендациях нет никакого смысла. Однако, если вы планируете разработку сайта или корпоративного решения за сотни тысяч рублей - нет ничего зазорного в том, чтобы спросить рекомендации, телефоны, мессенджеры предыдущих заказчиков. У опытных специалистов, которые работают за адекватный бюджет (1500-4000р/час) и достаточно давно, с этим обычно не бывает проблем.

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

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

P.S. Если на той площадке, где вы нашли дизайнера, у него нет отзывов, спросите где они есть. Если их нет вообще нигде - лучше откажитесь. И помните что отзывы - не равно живые рекомендации.

Попросите показать готовые сайты

История успеха / Irina SalvartИстория успеха / Irina Salvart

Да, UI дизайнер рисует картинки. Да, он не отвечает на 100% за конечный результат в виде сайта. Однако, спустя много лет работы дизайнером, просьба показать готовые сайты мне не кажется такой уж неадекватной.

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

Предложите заключить договор или безопасную сделку

Когда заказчик предлагает мне заключить договор, единственное что я спрашиваю - оформим на самозанятого, ИП или ООО? Предполагаю, ООО есть далеко не у всех, а вот оформить самозанятого можно за 5 минут. Наличие статуса или ИП у дизайнера свидетельствует о том, что он серьезно относится к своей работе. Также, у ответственного дизайнера всегда есть рамочный бриф, договор, который он готов прислать по запросу.

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

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

Оцените личное общение

Дизайнер из 90-х / Irina SalvartДизайнер из 90-х / Irina Salvart
  • Насколько внимателен дизайнер? Например, вы задаете 2 вопроса в одном сообщении. Если вам отвечают на один, причем такое повторяется не раз - думайте сразу о том количестве правок, которое будете писать, и сколько раз будете просить их исправить.

  • Не боится ли он задавать вопросы, не строит ли из себя мачо, говоря что все понятно? Чем сложнее проект - тем больше вопросов заказчику я задаю, чтобы убедиться, правильно ли я его поняла. Неправильно понятое ТЗ = реальный шанс на то, что половину проекта придется переделывать.

  • Предложил ли дизайнер заполнить бриф, передать ему подробности проекта? Если брифа нет, как и других документов - один тревожный звоночек у вас есть.

  • Насколько грамотно и адекватно он общается? Если со второго сообщения в вас тыкают и говорят на сленге - стоит задуматься.

Работайте по адекватным ценам и соблюдайте договоренности

С моей точки зрения, в ценовой категории 200-1000 рублей в час непрофессиональных и откровенно странных дизайнеров гораздо больше, чем в категории 1500-2500 рублей в час. В первом случае, вы можете делать проект за 100.000 рублей 3 месяца, а во втором за те же деньги проект будет готов через 2 недели. В общем, попытка сэкономить часто будет стоить долгих поисков, большей вероятности возможных проблем, обильного списка правок и увеличения сроков.

И наконец, очевидное: соблюдайте договоренности и не заваливайте дизайнера десятками далеких от дизайна вопросов. Лучше изучить его анкету, работы, обсудить с понравившимся кандидатом 30 минут по Zoom и принять решение: работать или нет.Для найма на постоянную основу, критерии, конечно, другие, однако никто не мешает попробовать сделать с дизайнером 1-3 проекта, а затем, рассмотреть в качестве постоянного сотрудника.

Буду рада услышать о вашем опыте подбора дизайнера на проект!

Подробнее..

Перевод Переосмысляем настольный компьютер как концепцию

06.06.2021 16:09:40 | Автор: admin
Мысли о новом направлении пользовательского интерфейса рабочего стола

image

Просто задумайтесь о каком-то серьезном деле, прежде чем выйти на теннисный корт. Из Macintosh (1984) компании Apple Computer.

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

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

(Я давно пользуюсь Mac, поэтому мой опыт и примеры относятся к этой платформе. Может быть, Windows сейчас великолепна, я не знаю, мое последнее реальное знакомство было с XP, когда я работал в Microsoft.)

image


У Вас есть 88 безымянных документов для предварительного просмотра. Вы хотите просмотреть эти документы перед выходом? Если Вы не просмотрите эти документы, они будут удалены. Просмотреть изменения Удалить и выйти. Отмена.

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

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

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

image

Выживание и процветание в Consolidated Companies, Inc. С 9 до 5 (1980).

Что такое метафора рабочего стола?


С момента появления операционной системы с графическим интерфейсом пользователя на компьютерах массового потребления в середине 1980-х годов они были разработаны в основном вокруг того, что тогда называлось метафорой рабочего стола, и более полезно описывать это как систему, ориентированную на документы:

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

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

Этот дизайн работал в 1980-х и 1990-х годах. Это стимулировало революцию в производительности и полезности, поскольку продуктивная работа выводилась более или менее прямо на экран, просто с гораздо большим количеством функций. Нужно написать записку? Откажитесь от пишущей машинки, откройте Word и отредактируйте, что душе угодно. Затем сохраните его в папке на диске для последующего доступа. То же самое с таблицей бюджета и т. д. Просто делаете небольшие заметки? Может быть, сохраните их в файл на рабочем столе, чтобы легко вернуться к нему снова. В конце рабочего дня выключите компьютер, закройте дверь офиса и идите домой!

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

image


Из плана Тима Бернерса-Ли для всемирной паутины (1989).

Интернет полностью изменил то, для чего мы используем компьютеры


Существует целая техно-экономическая и социальная история того, как мы жили с тех пор и до настоящего времени, но детали не важны. Важно то, что если бы вы сегодня запустили старый Macintosh 1980-х (или даже 1990-х), вы бы обнаружили, что интерфейс на удивление знаком, но вы бы застряли с вопросом: ОК, но он что-нибудь делает?

Это потому, что Интернет лежит в основе почти всего, что мы делаем на компьютере сегодня. Сколько окон браузера у вас открыто сейчас? (У меня открыто 37 окон, из них более 75 вкладок.) Электронная почта, календарь, совместная работа с облачными документами, Twitter, Instagram -по большей части или даже всё в браузере. Что еще? iMessages и Slack это приложения, которым требуется Интернет для выполнения каких-либо действий. Ничего подобного в 1985 году не существовало.

И вместо создания документов своего рода тяжеловесного рабочего продукта многое из того, с чем мы сейчас работаем на наших компьютерах, представляет собой фрагменты: URL-адреса и мем-гифки, которые мы копируем и вставляем между окнами или чатами, PDF-файл, который мы загружаем, чтобы распечатать или заполнить в и по электронной почте. Данные, которые мы копируем из одной таблицы в другую. Фотографии с телефона, которые мы обрезаем, чтобы загрузить в другое место. Видеоклипы, в которых племянницы-малышки делают что-то милое.
Некоторые из этих фрагментов становятся файлами в наших папках Загрузки или Рабочий стол, потому что это место по умолчанию для их размещения. Третьи мы пытаемся сохранить где-нибудь более долговечным. Многие никогда не имеют дома на нашем компьютере, но проходят через компьютер как временный элемент буфера обмена для копирования и вставки, прежде чем исчезнуть в программах или облачных программных обеспечениях, таких как приложения для чата или электронная почта. Мы используем набор открытых документов (вкладок) в качестве своего рода памяти или списка дел.

Но все это поведение по-прежнему прививается этому рабочему столу и шкафу для хранения документов. Когнитивная нагрузка, создаваемая современным использованием Интернета поверх метафоры 1980-х годов, высока: у меня на рабочем столе разбросано (в настоящее время) 132 значка. У меня есть папка Загрузки с (в настоящее время) несколькими сотнями файлов, большинство из которых я могу безопасно удалить, но у кого есть время, чтобы это решать? То же самое с открытыми документами в Safari, Preview, Pages, Numbers, TextMate и т. д.

Между тем, есть много всего, что я не могу найти ссылка, может быть, с прошлой недели? или это было неделей раньше? Кому я скопировал это снова? Или налоговую форму, которую я определенно скачал за последние несколько месяцев, но я действительно не могу вспомнить, как она называлась и сохранил я ее или нет. Веб-страницу, которую я оставил открытой пару дней назад, потому что я знал, что позже захочу более внимательно изучить ее, но теперь у меня уходит больше времени, чтобы найти ее, чем повторно искать в Google.

Таким образом, существует две проблемы:

  1. Постоянно увеличивающаяся куча неорганизованного и часто временного материала, неограниченно накапливающаяся в папках, на рабочем столе и во всех наборах открытых документов программ.
  2. Постоянно увеличивающийся набор идей и информационных фрагментов, которые стоит хранить и к которым нужно иметь доступ, но которые либо не хранятся на диске в виде файлов в традиционном смысле, либо живут исключительно в облачных сервисах, доступных через браузер, либо их так трудно восстановить что проще просто погуглить и снова поискать по электронной почте. (Это также может дать вам избыточную загрузку в качестве бонуса, теперь у вас есть Docs Final-4.zip, чтобы заставить вас чувствовать себя глупо из-за того, что вы просмотрели это пять раз.)


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

image


Преобладание (хорошего) поиска над организацией


Известно, что Yahoo был основан как каталог молодой всемирной паутины. Он использовал древовидную структуру для категоризации всех имеющихся веб-страниц. Это было нормально, потому что всего веб-сайтов еще не так много, и было намного проще найти то, что вы хотели в Путеводителе Джерри и Дэвида по всемирной паутине, чем запоминать URL-адрес для ввода.
Всего через несколько лет эта система стала безнадежной. Интернет рос экспоненциально с точки зрения сайтов, но также он развивал постоянно меняющиеся способы представления и создания фрагментов и частей контента, так что формат каталогов сайтов верхнего уровня даже не был отличным способом каталогизации мира. не говоря уже о том, чтобы найти в нем свой путь.

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

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

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

Что-нибудь из этого звучит знакомо? Наши компьютеры уже много лет принимают небольшие меры для решения наших собственных задач поиска информации. Пытаются и лишь частично им удается закрыть эту скрипучую структуру рабочего стола.

На Mac Spotlight (поле поиска, который появляется при нажатии command-space) существует с 2005 года. Его задача добавить поиск к материалам на компьютере. Это неплохая работа, но не чудесная. Он по-прежнему в основном понимает информацию с точки зрения локальных файлов и актуальность с точки зрения соответствия текста и даты. Это намного ближе к AltaVista, чем к Google.

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

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

Все это кажется огромной упущенной возможностью.

image


Компьютер для современного пользователя


Я думаю, что пора переосмыслить, для чего используется настольный компьютер, и перестроить UX вокруг этого. Вот несколько направляющих принципов:

  1. Каждая часть информации, с которой взаимодействует пользователь, является фрагментом, и каждый фрагмент можно будет найти позже с помощью стандартных интерфейсов. Сюда входят документы и заметки, создаваемые пользователем, данные, которые пользователь копирует/вставляет, а также такие вещи, как вкладки, открытые в браузере. Фрагменты также имеют обширные метаданные, которые помогают их найти: не только текст в документах или заметках, но также текст на открытой веб-странице, а также источники и места назначения вставленных элементов, а также то, что они решают. Представьте себе поиск по запросу кошка, и одним из лучших результатов является фотография кошки, которую я скопировал и вставил между чатами iMessage на прошлой неделе современная классификация изображений плюс фрагменты буфера обмена и т.д.
  2. Фрагменты создаются одинаково, но быстро приобретают ценность или распадаются. Отслеживается использование каждого фрагмента (открытие, доступ, просмотр, повторное копирование, редактирование и т.д.). Не просто дата последнего изменения или что-то еще, а вся история шаблона доступа. Фрагмент имеет полный профиль выявленных предпочтений использования, связанных с ним. Этот профиль вместе с современными технологиями глубокого поиска используется для определения релевантности.
  3. Мощный Интернет с человеческим лицом Мацея Цегловского подчеркивает когнитивный диссонанс между человеческой памятью (ступенчатой, сложной и, в конечном итоге, ошибочной) и компьютерной памятью (двоичной: безупречной или несуществующей). Мы должны моделировать поиск по фрагментам и доступ к ним по человеческой памяти, используя шаблоны доступа и шаблоны использования в качестве обширных метаданных, чтобы помочь компьютеру понять, что важно, а что релевантно. И что с чем связано. Это не означает автоматическое удаление документов по прошествии некоторого периода времени, но так же, как гораздо сложнее найти в Google что-то общее, что произошло десять лет назад и привлекло мало внимания с тех пор, не должно быть легко найти безымянную рабочую таблицу, которую мы приготовили, чтобы проверить бюджет платежей за автомобиль в 2013 году (но мы сможем найти ее, если понадобится).
  4. Программы должны избавиться от ужасной ерунды вы хотите просмотреть 88 открытых документов. Это сильно раздражает, а также снижает производительность системы. Точно так же, как приложения годами автоматически сохранялись (огромное улучшение!), просто закрывайте файлы через некоторое время, если пользователь даже не смотрит на них. Не удаляйте их, храните в архиве с расширенными метаданными, чтобы их можно было найти в случае необходимости. Большинство приложений на современном рабочем столе заставляют вас платить реальную цену за производительность в дополнение к когнитивной нагрузке за то, что у вас есть куча пассивно открытых документов. (Более новые мобильные ОС (например, iOS) имеют это право наличие 500 вкладок, открытых в мобильном Safari, что я всегда делаю, нисколько не ухудшает производительность моей системы, потому что вкладки сушатся при замораживании, когда я их не использую)
  5. Иногда, моделируя человеческую память, что-то должно удаляться безвозвратно. Контент, к созданию которого непосредственно принимает участие пользователь, вероятно, не должен. Но фрагменты из других мест должны: история Интернета уже есть, хотя обычно с жесткой временной шкалой, а не спадом, основанным на релевантности. Возможно, фрагменты из буфера обмена. Загруженные файлы, к которым никогда не обращались или которые не были сохранены в более официальном месте.


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

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

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

Есть много интересующей вас информации, которая находится в облаке, либо на веб-странице, либо внутри огороженного сервиса (Google Docs и т.д.). Это путь будущего для многих вещей, и я не хочу предлагать здесь возврат к 80-м годам. Но Spotlight на моем Mac не является оптимальным, если он выделяет ненужные файлы в моей папке загрузок, но не в моих документах Google, верно? Возможно, сегодняшний настольный компьютер имеет больше смысла как обладающий глубокими способностями авиадиспетчер-библиотекарь, а не как главный центр документации.

Существуют также службы, которые выполняют разные уровни того, что я предлагаю. Evernote отличный пример блестящего инструмента (заключенного в многострадальную программу), который индексирует все, что вы в него добавляете, включая текст, найденный в изображениях, так что когда его поиск действительно работает, он становится довольно волшебным. Друг рассказал мне о Notion, которая претендует на то, чтобы взять на себя некоторые связанные роли для команд. Но это не рабочий стол вашего компьютера, нервный центр, которого находится на стыке вашей клавиатуры и монитора, локального диска и подключения к Интернету. Вещь, которая по-прежнему остается столешницей из орехового дерева и потрепанным металлическим шкафом для папок.

image


Все это действительно история о доступе к информации. Я не особо уверен, каким должно быть будущее настольной части метафоры рабочего стола. Все это с кучей и кучей окон, которые все время открыты, всегда несло в себе проблемы. Но теперь совместное использование экрана на встречах стало обычным делом. Каждый может взглянуть на ваш грязный рабочий стол. Или вам придется очень быстро привести его в порядок перед встречей. (А затем мы вернемся к этому диалоговому окну из предварительного просмотра в верхней части этой статьи.)

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

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

Appwrite, open-source бэкэнд-платформа

10.06.2021 10:07:14 | Автор: admin


В последние пару лет намечается тенденция на упрощение работы с бэкэндом, появляется всё больше low- и no-code обёрток для тех, кто хочет сэкономить на стоимости разработки. Экосистемы AWS и GCP задают стандарты в этой области, и все новые проекты стараются копировать их фичи. Проблема в том, что многие молодые проекты предлагают свою панельку с доступом к базе, cloud functions и базовой аналитикой, а потом продают её на сервисной основе. Идея так себе, потому что имея функционал, такой же как у гигантов, они, не имея такого же кредита доверия, пытаются сразу заработать на клиентах. Гораздо больше шансов на успех у тех, кто ведёт полную разработку в open-source, поощряет self-hosting и не пытается сходу монетизировать свой проект, взимая деньги только за использование в облаке. Пример такого подхода Appwrite, и благодаря ему они всего за два года обзавелись большим комьюнити и поддержкой, не успев полностью выпустить продукт и не начав зарабатывать на нём.

Функционал




Appwrite интегрируется с мобильными и веб-клиентами (всякий JS, Flutter, Swift, Objective-C, Kotlin) и предоставляет нужную среду для бэкэнд-задач (Node, .NET, Python, PHP, Ruby, Deno, ограниченно на Go и Java). Разбираем основной функционал:

Авторизация


Авторизация работает по паролю, OAuth и JWT. Вместе с последним в релизе 0.8 появились анонимные сессии в современном вебе это мастхэв фича, которой не хватает во многих аналогах. Список OAuth провайдеров захардкожен, новых нельзя добавить из интерфейса, но можно форкнуть репозиторий и дописать вручную. Сейчас доступны:

  • Amazon
  • Apple
  • BitBucket
  • Bitly
  • Box.com
  • Discord
  • Dropbox
  • Facebook
  • GitHub
  • GitLab
  • Google
  • LinkedIn
  • Microsoft
  • PayPal
  • Salesforce
  • Slack
  • Spotify
  • Tradeshift
  • Twitch
  • VK
  • Yahoo
  • Yandex
  • WordPress


Аккаунт


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

База данных


Судя по беглому обзору зависимостей, для большинства задач здесь используется MariaDB, при этом все данные хранятся в JSON в виде коллекций. Допускается использование для коллекций как строгой структуры, так и динамической, обе с любой степенью вложенности. Есть готовые фильтры с глубоким поиском, валидация и контроль доступа с гибкой системой разрешений.

Хранилище


Для всех пользовательских файлов есть готовое хранилище, также с фильтрацией и контролем доступа и действий на уровне отдельных пользователей и групп:

  var appwrite = new window.Appwrite();  appwrite    .setEndpoint('https://localhost/v1')    .setProject('[PROJECT-ID]')  ;  var file = document.getElementById('file-input').files[0];  let read = ['*']; // wildcard read access  let write = ['user:self']; // write access only to me  appwrite.storage.createFile(file, read, write)    .then(function (response) {      console.log('file uploaded successfully');    }, function (error) {      console.log(error);    });


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

Вебхуки


Кастомное поведение после триггера нужного эндпойнта. Вы знаете, как работают вебхуки.



Список событий очень большой, покрываются разделы account, database, functions, storage, users и teams.

Задачи и функции


Серверные функции, запускающиеся по расписанию или по определённым хукам. Задачи поддерживают кастомные заголовки HTTP и авторизацию для разных сценариев. Функции исполняют кастомный код в разных окружениях (Node, .NET, Python, PHP, Ruby, Deno), с нужными ограничениями по правам и доступом к указанным переменным окружения. Очень гибкая штука.

Установка


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

Если нет докера, ставим его:

  sudo apt-get update  sudo apt-get install \    apt-transport-https \    ca-certificates \    curl \    gnupg \    lsb-release  curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg  echo \    "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \    $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null  sudo apt-get update  sudo apt-get install docker-ce docker-ce-cli containerd.io


Затем качаем и запускаем установку:

  docker run -it --rm \    --volume /var/run/docker.sock:/var/run/docker.sock \    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \    --entrypoint="install" \    appwrite/appwrite:0.8.0


Проходим установочный скрипт (если хочется просто пощупать, достаточно указать везде дефолтные значения) и переходим в панельку (она будет жить на тех портах, которые мы укажем при установке, по дефолту localhost:80 / :443).

Заключение


Appwrite не похожа на другие Backend-as-a-Service проекты, стремящиеся к быстрой монетизации. Здесь разработчики сначала фокусируются на задачах, реализации и тестировании фич, и ещё даже не подошли к сервисной модели (которая, тем не менее, планируется). Проект опенсорсный и поддержка self-hosting заявлена вечная, так что сейчас Appwrite выглядит отличным решением, которое можно как минимум потестить на пет-проекте.

Ссылки:




На правах рекламы


Наши эпичные серверы вы можете использовать для любых задач разработки, размещения сайтов, использования под VPN и даже получить удалённую машину на Windows! Идей может быть много и любую из них поможем воплотить в реальность!

Присоединяйтесь к нашему чату в Telegram.

Подробнее..

Перевод Как эти забавные картинки незаметно захватили сферу маркетинга

15.06.2021 12:07:46 | Автор: admin

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

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

Такой стиль иллюстраций называется корпоративный мемфис.

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

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

Как так получилось? И какое значение этот стиль имеет в сфере маркетинга?

Давайте разберемся.

Откуда название корпоративный мемфис?

Название кажется странным, но если разобраться в происхождении, то всё становится на свои места.

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

Со временем всё больше компаний начинали внедрять черты такого дизайна в собственные иллюстрации.

Получившийся в итоге стиль назвали корпоративным мемфисом.

Дизайнер Клэр Эванс собрала примеры этого тренда в ее коллекции вирусное проникновение этого стиля становится очевидным. Подобно воде, просачивающейся сквозь почву, он нашел отражение в контенте множества технологических компаний, включая Slack, Markup и Google.

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

Да, эти иллюстрации с разных сайтов: скриншоты из Slack, Markup и Google Покупок.Да, эти иллюстрации с разных сайтов: скриншоты из Slack, Markup и Google Покупок.

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

1. Смерть скевоморфизма

Помните старые 3D-иллюстрации на айфонах? Это скевоморфизм дизайнерский стиль, при котором изображение элементов интерфейса имитирует реальные аналоги.

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

Так что покойся с миром, скевоморфизм.

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

Корпоративный мемфис недостающий элемент мозаики плоского фирменного стиля.

2. Взаимозаменяемые цвета

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

Скриншот YouTube Скриншот YouTube

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

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

3. Простой, масштабируемый дизайн

Еще один фактор популярности корпоративного мемфиса простота создания иллюстраций в этом стиле.

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

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

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

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

Например, Canva одна из множества платформ, предлагающих готовые элементы оформления. Среди других ресурсов FreePik, UnDraw, векторная библиотека Adobe, Humaaans и т. д.

4. Радость на лице радость в жизни?

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

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

И это работает.

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

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

Внешность может быть обманчива

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

Ненастоящее этнокультурное разнообразие

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

Простота для ленивых

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

Бездумное счастье

Улыбающиеся лица с непропорциональными частями тела создают впечатление, будто мир проще, чем на самом деле. Компании сознательно используют это, чтобы представить себя дружелюбнее, чем они есть в реальности. И мы начинаем верить, что техногиганты делают мир лучше но нельзя забывать, что почти у всех них есть темная сторона: например, такие компании, как Google, собирают пугающее количество данных о нас.

Заключение

Корпоративный мемфис это палка о двух концах.

С одной стороны, это репрезентативный, простой и дружелюбный визуальный стиль. Создавать такие картинки может каждый что очень помогает стартапам и независимым авторам.

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

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

И если увидите маркетинговые материалы в стиле корпоративного мемфиса (что неизбежно), остановитесь на мгновение, задумайтесь, присмотритесь и оцените, достаточно ли правдиво эти иллюстрации воплощают компанию?


О переводчике

Alconost занимаетсялокализацией игр,приложений и сайтовна 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаемрекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Подробнее..

Категории

Последние комментарии

© 2006-2021, personeltest.ru