Павел Моисеенко

дизайн

Пиктограммы в тексте II

Любимейший графический прием.

Список сплошным текстом с вкраплением фотографий:
Снимок экрана 2017-06-25 в 21.46.17
https://www.nytimes.com/

Микрокаталог товаров:


http://wekflatm.kr/?ckattempt=2

Когда пиктограммы внутри текста не просто встают в строку, а перекрывают соседние — выглядит в миллион раз лучше:
5822f7961c09bf5a5db6d38ce87e4b26

Стикеры:
tumblr_oet7jo16me1qkm8e2o1_1280
http://pastafrola.tumblr.com/

Крепкий афишный стиль:


https://fontsinuse.com/

Текст обтекает пиктограммы, а не наоборот:
10471.jpg
http://www.ad518.com/

Пиктограммы полностью вытеснили текст. Письмо Чарльза Имза дочери из Москвы:
moscow-rebus-eames-copy_2
http://www.kvadratinterwoven.com/from-russia-with-love

Первая часть пиктограмм в тексте

1 комментарий

, , ,

Форма оплаты картой

Об этом не рассказывают на UI/UX-вебинарах. Имя держателя карты необязательно для заполнения:

unitpay
Unitpay.ru

rocketbank
Рокетбанк

5 комментариев

, ,

Сервис «Реентер»

cover@2x

Задача: автоматизировать налаженный процесс ведения клиентов.

Было
Сейлы продавали клиентам рекламу, аккаунты заводили рекламу вручную, раз в неделю отчитывались перед клиентом
Стало
Клиенты сами заводят рекламу вручную и управляют ею, отчетность видна всегда в сервисе

калькулятор@2x

Клиенты сами создают шаблоны объявлений с помощью конструктора.
конструктор@2x

Следят за ходом рекламной кампании. Изучают товарную аналитику.
отчет@2x

инструкция@2x

Кликабельный макет в Инвижине

Нет комментариев

,

Обложки Bloomberg Businessweek

Игры со стандартными форматами верстки — заголовками, тизерами, логотипом:

Интерфейс проникает в оффлайн:

Больше трэша:

Чистая типографика:

Коллаж:

Мусорная эстетика объявлений и дешевых журнальчиков:

Ну и просто прекрасные:

Больше прекрасного:

Авторитетный деловой журнал, на минуточку.

Нет комментариев

, , , ,

Преувеличенная ценность полей

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

golden_section_page_tschichold
Книжный канон Чихольда и бюрошный принцип якорных объектов

Артем Горбунов пишет:

С противоположных сторон от якорного объекта должны быть «воздух» контрпространства либо менее плотные и заметные объекты. Источник

Одинаковые вертикальные и горизонтальные поля — признак слабой, любительской, невнимательной вёрстки. Источник

Это несовременный взгляд в мире, где книга выглядит так:
ibooks_iphone_5_hero

Заголовок не имеет отступа справа и ничего — катастрофы не случилось!
harrygassel
harrygassel.info

Заполнять собой пространство — естественное поведение текста:
bubeundkoenig
bubeundkoenig.de

С выключкой текста, что условным хорошим вкусом клеймится как смертный грех:
tomcavill
tomcavill.com

С никак необозначенными переносами слов, что клеймится еще большим грехом и пожизненным позором:
lunchtype
lunchtype.com

Или даже так:
178626987
178.62.69.87

По журнальному боевито:
hassanrahim
hassanrahim.com

Плакатно, в духе афиш музыкальных фестивалей. Здесь труднее всего представить уместность книжного канона и якорных объектов:
listenand
listenand.watch

В виде списка:
soldout
sold-out.ch

И списка с картинками:
gabeferreira
places.gabeferreira.com

Вся ширина экрана, крупный текст, экономность, выразительность, разнообразность — да!

14 комментариев

, , ,

Нет комментариев

, ,

«Хороший интерфейс — невидимый интерфейс» Голдена Кришны (2015)

no_interface

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

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

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

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

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

О том как футурологи видели будущие офисы без бумаги. И они стали без бумаги. Но с интерфейсами:

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

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

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

О голосовых интерфейсах. К модным ботам телеграмма эта механика применима так же:

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

С:\>_

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

Скептично о тотальной автоматизации. О проблемах с кассами самообслуживания в супермаркетах:

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

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

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

Я думаю, что на самом деле происходит нечто другое. Спросите только Криса Матыщика, который написал для CNET следующее.

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

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

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

Отлично используется книжный формат. Вот откровенно издевательский рассказ на 10 (!) страницах о том, как разблокировать дверь автомобиля с помощью приложения:
no_interface_inside

Или на нескольких страницах перечислено как человек использует свой смартфон в течении дня:
smartphone_use

Книга что надо.

1 комментарий

, , ,

«Психология влияния» Роберта Чалдини (1984)

bcd3af88-8907-4b2f-8667-d765af112ecb

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

Под каждый тезис Чалдини приводит множество примеров социологических тестов. Но не все тесты верны. И не все верные тесты истолкованы правильно. Те кто проводил А/Б тестирование знает, что есть десятки возможностей облажаться. Начиная с поиска однородной аудитории, заканчивая неучтенным доверительным интервалом. А самое главное — верно истолковать результаты эксперимента.

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

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

Надежный (!) банк чуть не разорили мимо проходящие (!!) вкладчики. Да я что, дурак, чтобы в эту сказку поверить?!

А еще бывает, что люди подгоняют факты под теорию. Я не знаю, относится ли это к Чалдини, но похоже на то:

После того как на первых страницах газет появляется рассказ о каком-нибудь самоубийстве, самолеты — частные самолеты, реактивные самолеты, принадлежащие крупным корпорациям, рейсовые авиалайнеры — начинают падать с неба с пугающей частотой. Было показано (Phillips, 1979), что сразу после волны публикаций, рассказывающих о самоубийствах, число людей, которые умерли во время авиакатастроф, увеличивается на 1000%! Более того: увеличение числа смертей от несчастных случаев касается не только смертей в самолетах. Число дорожно-транспортных происшествий также резко увеличивается (Phillips, 1980).

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

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

2000px-piratesvstemp-svg
Ну вот же график — вот четкая зависимость!

Книгу хвалят маркетологи, рекламщики и дизайнеры. Я это могу объяснить одним — надо на что-то полагаться в работе. Чалдини им это даёт. Следствием увлечения книгами о психологии становится такое:
snimok-ekrana-2016-09-22-v-22-03-37
snimok-ekrana-2016-09-22-v-22-09-40
snimok-ekrana-2016-09-22-v-22-09-33
Букинг бомбардирует человека сообщениями, вынуждающими торопиться: кто-то еще смотрит тот же отель, номеров мало, заказывать надо сейчас, а то потом будет поздно.

Но гораздо чаще, такое:
snimok-ekrana-2016-09-22-v-22-14-21
snimok-ekrana-2016-09-22-v-22-22-01

Черт его знает.

Нет комментариев

, , ,

«Типографика в терминах и образах» Владимира Кричевского (2000)

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

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

Я профессионально вырос на русском вебе нулевых: студия Лебедева, затем Бюро, поздний Чихольд, Брингхерст, Тафти. Все это классическая книжная типографика. Широкие поля, много воздуха, маргиналии и тому подобное. Кричевский со скепсисом относится к классическим правилам хорошего тона. Его критика — глоток свежего воздуха и здравомыслия среди догматичного следования канону.

О висячей строке

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

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

О воздухе

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

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

img_2290
Классический канон не позволит заверстать текст в плашке прижатый к нижнему краю

img_2295
Не позволит сделать обрамление из текста

img_2291
За такое сразу по рукам!

Об удобочитаемости:

Размещение гарнитур в порядке снижения удобочитаемости отражает всего лишь картину их распространения в печати: первое место в конце 30-х годов прошлого века заняла Литературная, предпоследнее — Табличная. Удобочитаемость сомкнулась с употребляемостью, при том что последняя отразила не столько реальные достоинства гарнитур, сколько их доступность и укомплектованность.

Золотые слова:

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

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

Не удобочитаемостью единой жив читатель.

Нет комментариев

, , , ,

Чему стоит поучится у Гугла: поиск авиабилетов

1. Пункт назначения и отправления человеческим языком
Интерфейс поисковиков оперирует кодами аэропортов. С точки зрения интерфейса, я лечу в SVO (код аэропорта Шереметьево). Но в одном городе бывает много аэропортов (Домодедово, Шереметьево и Внуково в Москве), поэтому есть отдельный код города (Москва — это MOW). Эта агрегация помогает быстрее найти рейс: достаточно указать Москву и я буду искать во всех трех аэропортах. Гугл пошел дальше. Он агрегирует аэропорты на всех уровнях: город, область, страна, континент.

А вот автобусные кампании еще толком не научились агрегировать остановки. На сайте перевозчика Люксэкспресс предлагают выбрать одну из восьми остановок. Откуда я знаю!
luxeexpress
Я был вынужден просмотреть по порядку все варианты, чтобы найти нужный автобус

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

Ты ничтожный болван! Это же BIA, CLY, AJA и FSC, глупое создание!

Гугл все поймет:

И даже так:

2. Отображение на карте
google_flight_map
Самый естественный формат визуализации перелетов. Карта наглядна и информационно насыщенна.

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

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

3. Показ результатов поиска без заполнения формы
В Бюро этот принцип называется «сначала данные, потом фильтры».

Чтобы найти авиабилет, поисковику надо скормить параметры:

  1. аэропорт отправления,
  2. аэропорт прибытия,
  3. дата,
  4. количество пассажиров,
  5. класс (эконом, бизнес и т.д.).

Все кроме пункта назначения поисковики научились заполнять по дефолту:

  1. аэропорт отправления: определяет город по айпишнику и выбирает все аэропорты в этом городе
  2. аэропорт прибытия,
  3. дата: через две недели,
  4. количество пассажиров: один,
  5. класс (эконом, бизнес и т.д.): эконом.

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

Нет комментариев

, , , , , ,