45 заметок с тегом

дизайн

Вёрстка телефонов

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

Вот дизайнер убрал код страны и вынес за скобки код города — сделал вёрстку поопрятнее:

...и лишил меня возможности позвонить по номеру в один клик:

«Неправильно набран номер. Пожалуйста, уточните номер и перезвоните».

Дальше два пути:

  1. Записать номер на оперативную память в голове и руками набрать его, добавив нужный префикс.
  2. Попробовать обойтись телефоном.

Выбираю второй путь, копирую:

С третьей попытки вставляю номер в «Телефон», но отредактировать не могу — курсора нет, удалять и добавлять цифры можно только с конца:

Ладно, иду в блокнот:

Эээ — tel:(812)%20234-2646 — фигня какая-то. За несколько попыток исправляю номер — +7 (812) 234-26-46. Не был бы разработчиком, не справился бы, ведь простые пользователи не знают, что %20 — это пробел.

Плохо.


Совет. Показывайте на сайтах полные номера, это нормально:

Наш телефон: +7 (812) 234-26-46

Ну или прячьте их в атрибут href, вот так:

Наш телефон в СПб: <a href="tel:+78122342646">234-26-46</a>

С номерами 8 800 xxx-xx-xx обычно всё хорошо.

2014   вёрстка   дизайн

#666

cover white transparent

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

Дизайнеры забывают, что мы живём не в виртуальной реальности. Между монитором и глазами есть воздух, от глаз до мозга тоже не близкая дорога, за окном светит солнце, ночью в мониторе отражается торшер, на мониторе пыль, да и откалиброван он хреново. А кто-то вообще дальтоник. Природа сама подмешает всякого разного в ваши #000, #666 и #FFF — и цвета, и шума — никто не увидит их такими же, как видели вы в своём воображении.

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

2014   дизайн   цвет

Красивые письма убивают конверсию?

cover white transparent

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

Мне казалось, что Мейлчимп даёт какие-то инструменты для этого, но нет. Там есть понятие «А/Б-кампания», но она работает не так, как хочется: тестирует или заголовок, или имя отправителя, или время отправки на небольшом сегменте пользователей, и затем отправляет письмо-победитель оставшимся пользователям.

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

Письмо в шаблоне выглядело так:

Письмо «без дизайна»:

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

Результаты теста:

Шаблон «Без дизайна»
Открыли письмо 53,7% 56,2%
Перешли на сайт 6,9% 7,9%
Заказали джинсы 7,2% 3,9%
Отписались 0,6% 0,7%

Процент открытия выше 50% — это круто, у Гетвеара очень лояльные клиенты, в среднем по икомерсу письма открывают всего 13,1% адресатов, если верить Мейлчимпу. На сайт перешло тоже относительно много человек — ≈7%, тогда как среднее по икомерсу — 2%.

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

Наш вывод — для рекламно-новостных рассылок вполне допустимо использовать шаблон «с дизайном».

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


Краткое содержание рассылки:

  1. Шорты за $70. Больше шорты не стоят столько же сколько и целые джинсы.
  2. Карго. Свободные мужские джинсы с накладными карманами на бёдрах.
  3. Новый чёрно-синий цвет. Выглядит также как сырой деним, но не красится.
  4. Волшебный купон 12737CP1C7W0B на скидку 30%.

Купон действует ещё до четверга. Воспользуйтесь и вы.

2014   А/Б-тесты   дизайн

Как проверять размеры в вёрстке?

Никакое специальное приложение для проверки размеров в вёрстке, вроде Икс-скоупа, у меня не прижилось. Слишком большая погрешность:

Правильный размер 198×68

Когда мне нужно что-то проверить приблизительно, я использую стандартную маковскую скриншотилку, cmd shift 4:

После измерений нажимаю esc, чтобы не сохранять скриншот.

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

Идеальная измерялка должна вести себя так:

  • жмёшь cmd shift M (или другой хоткей),
  • экран замирает и поверх появляется фотошопный Rectangular Marquee Tool,
  • работает зум,
  • выход по эскейпу.

А как вы проверяете размеры элементов и отступов в вёрстке?

2014   вёрстка   вопросы   дизайн

РСС

Ссылки на РСС-поток — издевательство, они ведут в машинное отделение:

Прячьте их. Никакой пользы. Люди, не знакомые с РСС, ничего не поймут и подумают, что сайт разломался. А гики и без вашей помощи скормят УРЛ блога агрегатору, который найдёт адрес потока в исходном коде:

<link rel="alternate" type="application/rss+xml" title="АП" href="/rss/" />

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

2014   дизайн   РСС

Технолог-дизайнер в жизни

В Гетвеаре я не только ведущий разработчик, но и ведущий дизайнер, представьте себе! Мой сериал-фантазия «Технолог — тоже дизайнер» материализовался.

Не всё даётся быстро и просто, но мне нравится, сдаваться не собираюсь.

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

Два месяца назад чуть лучше:

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

Когда всё хорошо, он молчит:

Но это бывает редко, люди сделаны не по Левайсу, так выглядит допустимое отклонение:

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

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

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

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

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

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

2013   Гетвеар   дизайн   работа   разработка

Два монитора

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

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

Рекомендую.

2013   дизайн   работа   я

Фоторама 4

Анонс!

Три с небольшим месяца назад я начал переписывать Фотораму с нуля. Было сложно и интересно. Сейчас всё уже почти готово, остались тесты, новая документация и сайт. Третью (текущую) версию думаю временно поселить на old.fotoramajs.com для желающих. Но это ещё когда.

С новой архитектурой Фоторама стала круче и гибче.

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

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

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

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

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

var api = $('.fotorama').data('api');
api
  .push({img: 'trololo.jpg'})
  .setOptions({loop: true})

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

При этом всём Фоторама не потяжелела и стала работать в два раза быстрее. Поверьте и не переключайтесь :-)

2013   дизайн   скрипты   Фоторама

Новая клавиатура Эпла

Вчера купил ещё одну эпловскую клаву, а в ней одно приятное изменение:

Новая — ближе

F4 теперь отвечает за лончпад, а не дашборд.

2012   дизайн   Мак

Будильник

Помнится Валера придумывал будильник для Айфона. Я никогда не запаривался по валериной схеме: Часы → Будильник → Изменить → Выбрать единственный будильник → Попасть наконец в настройку будильника → Выставить нужное время → Сохранить.

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

Выглядит интерфейс под стать пятому Айфону:

2012   Айфон   будильник   дизайн   жизнь
Ранее Ctrl + ↓