Seo блог подкасты podcast podcasting » История одной маленькой кнопки Google

апреля 10, 2009

автор admin

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

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

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

Вступление

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

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

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

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

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

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

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

Я знал, что должен быть лучший способ реализации таких кнопок, без использования таблиц и, тем более, таблиц из 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, где вы можете посмотреть на мой прогресс во время этой итерации. Я добавил возможности для изменения цвета границ при наведении на кнопку и инвертирования направления градиента на противоположный при нажатии. Я также пытался показать, как можно слепить несколько кнопок вместе, образуя pill button. Pill button не была идеальной, мне не нравились разрывы между верхними и нижними границами кнопок. Но это было лишь началом.

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

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

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

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

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

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

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

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

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

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

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

Автор: Генадий Драгун, Lead Information Architect EPAM

Рубрики Юзабилити

Теги: юзабилити

Оставить комментарий

Имя (обязательно)

Почта (скрыто) (обязательно)

Адрес блога

Images:

The images are downsized due to limited space here. The original dimensions may differ.
Click on the image to open it on a new tab.