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

Интерфейс РСС

Оптические компенсации

23 апреля 2014, 21:44

Ещё немного поработаю К.О.

Позиционные компенсации

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

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

Если объект композитный, нужно выравнивать по активному элементу. Например тень надо свешивать:

Вас начнут убивать разработчики, но вы не сдавайтесь.

Цветовые компенсации

Цвет существует в окружении других цветов и взаимодействует с окружением. На этом взаимодействии построены цветовые оптические иллюзии:

Например, светлый градиент на белом фоне виден, а если его поместить на тёмный фон — градиент пропадёт (тут нужен хороший монитор, чтобы рассмотреть разницу):

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

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

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

Такие дела.

Прописные истины проектирования интерфейсов

14 апреля 2014, 15:16

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

Модификатор поведения

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

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

Допустим, наличие даты оправдано, без неё поведение пользователей будет отличным от того, что мы хотим. Стоит рассмотреть составные части даты, меняет ли каждое из трёх чисел поведение или нет. Очевидно, если речь идёт о сервисе, где в черновики добавляет множество записей за день (например, автоматическое сохранение черновиков писем), то год не нужен. Вернее, год стоит показывать в качестве заголовка группы. Год, повторённый 100 раз не является модификатором поведения, пользователи просто перестанут обращать на него внимание.

Двойные двери

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

Типичным примером двойной двери является популярный в начале 2000-х приём «Войти на сайт».

Лишние коробки

Лишняя коробка — это попытка запаковать что-то достаточно компактное. Например, есть форма. Форма большая и страшная, вы решаете, пусть она будет свёрнута и разворачивается по кнопке. Хорошее решение, весь хлам спрятан в коробке. Но потом по мере работы над интерфейсом ваша форма похудела до нескольких компактных полей или вовсе до одной-единственной текстарии. Смысл коробки, в которую упакована форма, потерялась, нужно форму показывать без сворачивания, сразу.

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

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

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

Вот твитер молодцы, всё правильно делают:

Ветвление пути

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

Например, заказчик вам говорит: а давай на главной странице сделаем две кнопки «Добавить А» и «Добавить Б», которые будут вести на одну и ту же страницу, просто наверху страницы будет переключалка А/Б с выбранной опцией. Так зачем запаривать пользователя делать выбор на главной, если внутри этот выбор можно всё равно подкорректировать?

  • Тут должен был быть вывод.

Заявка на дизайн: тележки в супермаркете

18 января 2014, 23:12

В Париже и Хельсинки (и, скорее всего, ещё много где в Европе) тележки в супермаркетах имеют противоугонную систему.

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

Система работает просто. Тележка пристёгивается к впереди стоящей за цепочку с замком. Чтобы взять тележку, надо вставить в отверстие спереди ручки монетку и замок откроется. Когда попользовался тележкой, нужно найти стопку припаркованных тележек, вставить ключ впередистоящей тележки и забрать свою монетку. Можно не париться и не возвращать тележку на место, но тогда твоя монетка (от 50 центов до 2 евро) будет платой за работу магазинного охранника.

У этой конструкции есть несколько неудобств и пара откровенных дыр в безопасности:

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

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

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

Аппендиксы

20 мая 2013, 12:23

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

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

Ответ — это аппендикс и скоро он канет в лету.

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

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

Я покопался в памяти и нашёл несколько примеров исчезнувших и исчезающих аппендиксов:

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

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

Ещё пример:

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

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

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

Например, пешеходов сбивают на переходах. Вместо борьбы с причиной ДТП — незаметностью пешеходов — акцентируют внимание на знаках:

А последнее время вот так:

И даже так:

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

А теперь клуб футурологов: какие аппендиксы известны вам и какой способ их устранения вы видите?

Почему системы сеток — отстой

22 октября 2012, 14:03

Системы сеток, как и всё автоматизированное, — отстой, потому что отключают мозг дизайнера.

Существует много различных систем сеток — 12-, 16-, 24-колоночные и прочие. Выглядят они, например, вот так:

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

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

Всё зависит от размеров элементов и их вида:

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

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

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

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