Создание удобных ссылок и кнопок

Много раз мне приходилось задумываться, в чем разница между кнопкой и ссылкой. Я имею в виду, почему дизайнеры отдают предпочтение одному, а не другому? Разве ссылка не достаточно современное «изобретение»? Во время моей каждодневной работы этот вопрос вставал передо мной много раз.

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

Улучшая интерфейс на Event Seek, мы всегда стремились быть последовательными. Точно убедившись, что ваш интерфейс использует кнопки и ссылки логически правильно, вы не дадите вашим пользователям теряться в догадках о назначении тех или иных элементов.

Функции элементов

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

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

С другой стороны, кнопки обычно выполняют какое-либо действие (создать/обновить/удалить) над каким либо элементом вашего веб-приложения. Таким образом, если вы меняете состояние какой-либо части вашего приложения (редактируете базу данных, например), лучше будет использовать в данном случае кнопку.

Такое распределение действия/навигации лишь один из множества примеров распределения функций в пользовательском интерфейсе. Выберите способ, который наиболее вам подходит - или же вашим пользователям - и придерживайтесь его. Возможно, вашим пользователям покажется странным, что функция "добавить в друзья" выполнена в виде кликабельной кнопки (в конце концов, для кнопки там слишком много слов), но опять же, это изменить вид приложения. Такого рода вопросы вы должны задать себе перед тем, как выберите ваш способ. Что будет более правильно (логично) для всего приложения. Пользовательская умозрительная модель может говорить о преимуществе ссылки над кнопкой.

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

Пришествие Архитектур приложений RESTful облегчило эту задачу. В приложениях RESTful любая ссылка на сайт может рассматриваться как "безопасная", это значит, что клик по ней не изменит состояния приложения. Если же состояние изменилось, изменения легко отменить. Точно так же, любые кнопки на сайте изменят состояние приложения. Подумайте: добавление элемента в корзину или сохранение документа. Это действия и поэтому их лучше выполнить в виде кнопок.

Форма

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

Ссылки

Традиционно, все ссылки были синими; фрагмент подчеркнутого текста, который превращает курсор в "руку" при наведении - так выглядит обычная ссылка в сознании каждого. Со временем эта модель превратилась в простой подчеркнутый текст или же текст, который визуально отличается от остального контента.

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

Кнопки

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

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

Трактовка

Кнопки-вкладки. Bleh.

Чтобы продемонстрировать вам насколько важно разделение ссылок и кнопок, представьте себе навигации без ссылок, но только с кнопками: Насколько же неудобно будет зайти на сайт и увидеть целый ряд кнопок, по которым осуществляется навигация! Естественно пользователям будет намного удобней использовать "вкладки" для навигации по сайту. Вкладки, кому интересно, стали очень популярно, потому что они представляют точную умозрительную модель работы реальной страницы. В блокноте с вкладками, открытие определенной страницы по ее вкладке покажет только ее содержимое, которое соответствует вкладке (если все правильно рассортировано!).

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

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

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

---

Источник статьи: www.uxbooth.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

---

Оцените, пожалуйста, эту статью:

Опубликовано: 27 августа 2009 | Просмотров: 15822 | Страница для печати

Читать комментарии [10] на форуме.

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

Ваше имя:
Проверка на человечность: Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.

Идёт отправка комментария ...