Usability.by » Blog Archive История одной кнопки | Usability.by
Улучшаем взаимодействие пользователей с вашим сервисом Повышаем конверсию
в продажи, заявки или
звонки
Проектируем
новые
продукты
Компания 1Point осуществляет весь спектр услуг в области юзабилити, дизайна, user experience
и веб-аналитики

История одной кнопки

Геннадий Драгун Геннадий Драгун, Lead Information Architect EPAM

Перевод статьи Douglas Bowman, “Recreating the Button”

… Я хочу рассказать о разработке кнопок, которые с недавнего времени используются в Gmail, чуть ранее они появились в Google Reader. Эти кнопки выглядят очень похоже на стандартные HTML кнопки. Но они более интерактивны. Для этих кнопок не нужны изображения, они созданы исключительно средствами HTML и CSS, плюс немного JavaScript для управления их поведением. Их внешний вид легко поменять, переписав лишь пару строк CSS, что очень важно сейчас, когда у Gmail появились темы.

Мне показалось интересным рассказать о процессе разработки этих кнопок, о всех тех итерациях, которые нам потребовались.

GMail buttons

Вступление

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

К примеру, мы можем использовать <input type=»submit»> для отдельных действий, для списка опций меню, а <input type=»radio»> для отображения взаимоисключающих вариантов. Но этих стандартных элементов не достаточно для того богатства взаимодействия, которое требуется в веб приложениях. К примеру, чекбокс, который означает большее, чем просто включено/ выключено. Или функция авто заполнения, используемая, для ускорения процесса поиска. Кроме того, стандартные элементы управления по-разному отображаются в различных браузерах и операционных системах. Даже в одном браузере кнопки и меню могут выглядет по-разному, как этого требует дизайн.

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

Первая итерация

Вскоре после начала моей работы на Google и увидел эскизы экранов продукта, которые в будущем стал Google Spreadsheets. На эскизах использовались кнопки, визуально похожие на стандартные HTML кнопки в некоторых браузерах. Но они слегка отличались от всех стандартных кнопока, которыя я когда-либо видел. Отличием было то, что кнопки могли группироваться вместе по три, то, что называли pill button:

Spreadsheet buttons

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

nine-cell button

Избавляемся от таблицы и угловых изображений

Button 2.0

Я знал, что должен быть лучший способ реализации таких кнопок, без использования таблиц и, тем более, таблиц из 9 ячеек. Я начал работать над прототипами кнопок, стараясь улучшить их код. Моей первой попыткой были Custom Buttons 2.0, (версией 1.0 я считал начальный вариант с таблицей из 9 ячеек). В этой версии я попробовал тот же подход, которым пользовался для event chips в Google Calendar: кнопка была разделена на три части: верхнюю границу, среднюю часть и нижнюю границу. Верхняя граница была отдельным элементом с левым и правым марджином в 1px. Средняя часть содержала стили для левой и правой границ кнопки, а нижняя граница имела те же стили, что и верхняя: марджин в 1px слева и справа. Таким образом я мог создать по пустому пикселю в каждом из углов кнопки, что создавало иллюзию небольшого закругления.
Попытка номер два, как я и ожидал, хорошо работала почти в всех браузерах, но для нее требовалась, чтобы вся кнопка целиком или была float, или имела абсолютное позиционирование по ширине. Мне же хотелось, чтобы кнопка автоматически подстраивала свою ширину в зависимости от текста.

Используем inline

В попытке 3.0 я решил представить кнопки, вместе со всем их содержимым в виде inline элементов. Верхняя и нижняя граница все равно должны были рендериться отдельно от правой и верхней границ, чтобы получить эффект закругленной углов. Левая и правая границы рендерелись как внешний элемент, а верхняя и нижняя границы – как внутренний элемент. Мы настроили границы таким образом, чтобы нас получался зазор в 1 пиксель в каждом углу. Я долго мучался с этим подходом, пока не вспомнил про стиль display: inline-block. Казалось, что это было искомым решением.

Custom Buttons 3.0 Demo

Кликнув на изображение ввверху, вы попадете на демо страницу Custom Buttons 3.0, где вы можете посмотреть на мой прогресс во время этой итерации. Я добавил возможности для изменения цвета границ при наведении на кнопку и инвертирования направления градиента на противоположный при нажатии. Я также пытался показать, как можно слепить несколько кнопок вместе, образуя pill button. Pill button не была идеальной, мне не нравились разрывы между верхними и нижними границами кнопок. Но это было лишь началом.

Волшебный inline-block решил все проблемы, кроме проблемы с IE. Но тут на помощь пришли верстальщики Google. Они знали все секреты того, как работать под различными браузерами, мои эксперименты заинтересовали нескольких из них и они заставили мои кнопки заработать.

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

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

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

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

Для того, чтобы вставить эту третью цветную полосу, я вставил еще один элемент в код кнопки. Я выбрал тег <b>, потому что он был коротким и не нес никакого семантического значения. Этот элемент был абсолютно позиционирован, так что он мог спокойно себе жить позади кнопки и позади текста, ни на что не влияя.

Для самой кнопки я использовал почти белый цвет #f9f9f9. Для элемента <b> , я использовал цвет #e3e3e3. Элемент <b> был абсолютно позиционирован относительно нижнего края кнопки с высотой 40%. Для того, чтобы получить третью цветную полоску, я добавил верхнюю границу цвета #eee к элементу <b>.

Details of 3 bands approach

Еще одно демо Custom Buttons 3.1, иллюстрирует мои попытки заставить это псевдоградиент заработать. Это демо работает под Firefox и Safari, возможно еще под несколькими современными браузерами, но не под всеми. Я так и не смог добиться той степени совершенства, чтобы рекомендовать кнопку к использованию. На помощь снова пришли верстальщики. Попробуйте покопаться в Gmail и Reader, чтобы обнаружить наш финальный код.

Последний штрих

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

Visual Specification

… Эти кнопки пока не используются повсеместно в интерфейсах Gmail или Reader для всех браузеров (например, экран Compose View до сих пор использует стандартные кнопки в старых WebKit браузерах.) Но теперь, когда мы превратили эти кнопки в компоненты, ожидайте их появления в других приложениях Google. Там, где мы найдем им достойное применение.

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua


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

  1. Классная статья, спасибо. Обожаю когда люди всерьез подходят к таким мелочам.

  2. art:

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

  3. spadar:

    Ох..еть, гениально!

  4. Спасибо. Очень полезная статья. Автору и переводчику благодарность.

  5. .

    good info!…

Комментировать