Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 29
Выбрал все варианты.
Я ориентируюсь скорее на смену курсора. Ссылки могут быть любыми, или даже не ссылками в привычном понимании, но курсор должен ясно давать понять что элемент можно кликнуть.
Такое поведение не только у ссылок, а у почти любых интерактивных элементов. А раз так — значит это не обязательно ссылка. Переход по ссылке меняет бОльшую часть контента страницы, в то время как интерактивные элементы могут просто его дополнить, или же что-то исключить, отправить форму и тд.
У ссылки —
pointer, у другого интерактивного элемента — default.У кнопок принято pointer, кнопки — интерактивные элементы и не всегда кнопки — ссылки
У кнопок тоже принято
Так прописано, например, в стилях по умолчанию в Firefox, а у Гугла поверх этого даже так:
cursor: default: «To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don't need a hand pointer. The hand pointer must mean «this target is a link» and nothing else» (Mouse and Pointers). А вот обсуждение: Default cursor on mouse over of a button is not a hand pointer.Так прописано, например, в стилях по умолчанию в Firefox, а у Гугла поверх этого даже так:
.gbqfb, .gbqfba, .gbqfbb {… cursor: default !important; …}, у Яндекса — .b-form-button {… cursor: default; …}.Я не думаю, что у вас в телефоне в приложениях все кликабельные элементы подчеркиваются. UI должен быть логичным, и учитывать специфику устройства. Если делать сайт под мобильные устройства — скорее всего он будет отличаться от настольной версии.
Если есть статья, и в ней среди текста ссылка — то да, её можно как-то выделить, но чаще всего ссылки и так хорошо различимы, например если они в меню.
Если есть статья, и в ней среди текста ссылка — то да, её можно как-то выделить, но чаще всего ссылки и так хорошо различимы, например если они в меню.
Кликабельный элемент и ссылка — разные вещи, и их как раз нужно различать. В противном случае чтобы понять что произойдет непременно нужно кликнуть — а это лишние действия, без которых можно было бы и обойтись.
По-моему это понятие размывается. Ссылки на страницах могут иметь JavaScript обработчики, чтобы вместо открытия страницы выполнять локальное действие, и наоборот, блочный элемент может в результате клика приводить к переходу на другую страницу.
Это скорее синонимы, чем противоположные сущности.
Опять же ссылка в статье — не думаю, что нужно обязательно кликнуть, чтобы понять, что она делает, или ключик, который символизирует переход к редактированию, к примеру, статьи — не важно, откроется ли новая страница c редактированием, появится диалоговое окно с полем ввода, или WYSIWYG редактор вмонтируется в страницу, и эти действия даже могут отличаться в зависимости от возможностей браузера пользователя.
Это скорее синонимы, чем противоположные сущности.
Опять же ссылка в статье — не думаю, что нужно обязательно кликнуть, чтобы понять, что она делает, или ключик, который символизирует переход к редактированию, к примеру, статьи — не важно, откроется ли новая страница c редактированием, появится диалоговое окно с полем ввода, или WYSIWYG редактор вмонтируется в страницу, и эти действия даже могут отличаться в зависимости от возможностей браузера пользователя.
С моей точки зрения ничего не размывается. То, что ссылки (тег a) часто превращают в что-то другое совершенно другое не означает, что понятие ссылки размывается. При переходе по ссылке происходит несколько вещей:
1) меняется адрес
2) меняется контент
3) в истории браузера записывается этот самый переход
4) вытекает из 3 — можно обратно вернуться на эту ссылку
В случае с интерактивными элементами(создающими попапы/изменяющие поле ввода на редактор/убирающие элементы со страницы и тд) ни один из вышеперечисленных, кроме изменения контента не выполняется.
Поэтому и считается, что ссылки(те самые, по которым переходят) должны выделяться так, чтобы было понятно, что сейчас будет переход.
1) меняется адрес
2) меняется контент
3) в истории браузера записывается этот самый переход
4) вытекает из 3 — можно обратно вернуться на эту ссылку
В случае с интерактивными элементами(создающими попапы/изменяющие поле ввода на редактор/убирающие элементы со страницы и тд) ни один из вышеперечисленных, кроме изменения контента не выполняется.
Поэтому и считается, что ссылки(те самые, по которым переходят) должны выделяться так, чтобы было понятно, что сейчас будет переход.
Моя точка зрения немного иначе.
Да, это классическое определение, но сейчас 2013 год, контент может меняться не меняя адрес, а адрес может меняться при бесконечной прокрутке (имитация страниц), хотя контент цельный, резких переходов вроде как и нет, вы просто крутите ролик мыши, и в истории браузера это не запишется.
Веб — это уже давно не только набор ссылок, поэтому то, что вы называете ссылкой — лишь подкласс навигационных элементов.
И возвращаясь к теме топика, к подчеркиванию. Оно уже давно не единственный признак перехода между страницами, и это является естественным. А то мы ушли от темы.
Да, это классическое определение, но сейчас 2013 год, контент может меняться не меняя адрес, а адрес может меняться при бесконечной прокрутке (имитация страниц), хотя контент цельный, резких переходов вроде как и нет, вы просто крутите ролик мыши, и в истории браузера это не запишется.
Веб — это уже давно не только набор ссылок, поэтому то, что вы называете ссылкой — лишь подкласс навигационных элементов.
И возвращаясь к теме топика, к подчеркиванию. Оно уже давно не единственный признак перехода между страницами, и это является естественным. А то мы ушли от темы.
Естественно. Я нигде не сказал, что ссылка — единственное возможное средство навигации. В данном опросе я хотел узнать мнение именно по поводу ссылок, которые вызывают прямые переходы/подгружают основной контент.
Не единственный — ясно, без этого не было бы опроса, вопрос — как лучше?
Здесь упоминался интерфейс хабра, но в нем тоже не все идеально — переключаясь табами невозможно отличить на какой из ссылок ты остановился.
Так что помимо изначального выделения хорошо бы изменять стиль при состояниях.
Не единственный — ясно, без этого не было бы опроса, вопрос — как лучше?
Здесь упоминался интерфейс хабра, но в нем тоже не все идеально — переключаясь табами невозможно отличить на какой из ссылок ты остановился.
Так что помимо изначального выделения хорошо бы изменять стиль при состояниях.
Ссылки бывают «разные». Представьте single-page application, на нем tab-ы, переключение между ними пушит линк tab-a в хистори. Вроде и линк, но подчеркивать tab — немного неожиданно — верно? Я считаю, «очевидные ссылки» можно не подчеркивать. Если же ссылка теряется в общем UI — однозначно нужно выделять, не обязательно подчеркиванием.
Проанализируйте UI передовых ресурсов, начните с хабра.
Проанализируйте UI передовых ресурсов, начните с хабра.
Если вы про такие табы, которые выглядят как ссылки, то есть без ободка и подложки, то такие полуссылки стоит подчеркивать пунктиром. Исконные же табы не подчеркиваются, так как являются не ссылками, а элементом системного интерфейса. А так да — главное, чтобы было как-либо отличимо выделено, что можно нажать.
Кроме подчёркивания, можно сделать ссылку в виде кнопки. Только так.
В грамотном дизайне дизайнер может не подчеркивать/закрашивать ссылки, но при этом пользователь интуитивно понимает на что можно нажать, а на что нет.
Очень распространённый в последнее время пример: многие ругают Metro от Microsoft за то, что там не выделяются элементы, на которые можно нажимать на фоне обычного текста. На самом деле это проблема только разработчика стороннего приложения. Это означает, что дизайн не настолько интуитивен/усложнён/захламен, потому что в нативных приложениях и сайтах Microsoft такой проблемы нет.
Взять к примеру тот же сайт Outlook. (также отличный пример адаптивноё вёрстки, поиграйтесь с шириной окна браузера)
Так что, не обязательно не подчеркивать/закрашивать/визуально отделять ссылки.
Очень распространённый в последнее время пример: многие ругают Metro от Microsoft за то, что там не выделяются элементы, на которые можно нажимать на фоне обычного текста. На самом деле это проблема только разработчика стороннего приложения. Это означает, что дизайн не настолько интуитивен/усложнён/захламен, потому что в нативных приложениях и сайтах Microsoft такой проблемы нет.
Взять к примеру тот же сайт Outlook. (также отличный пример адаптивноё вёрстки, поиграйтесь с шириной окна браузера)
Так что, не обязательно не подчеркивать/закрашивать/визуально отделять ссылки.
see more see more see more see more – вот что я вижу в нижней части outlook.com и я не считаю это нормальным. Я так же привык щелкать по заголовкам (спасибо, Хабр). На аутлуке щелчок по заголовку ни к чему не приводит, и это в нативном сайте.
В итоге я, человек из целевой ауитории аутлука, знакомый с айти технологиями получаю негативный отзыв системы и считаю ее работу некорректной по отношению ко мне.
Как по мне то это нормально подчеркивать сылки или делать их в виде кнопок. Да, иногда некрасиво, но я не Рембрандта покупаю чтобы им умиляться, а захожу на сайт в поиске информации. Подчеркнутые ссылки облегчают мне работу, а метро-стиль и надежда на мою интуицию осложняют.
В итоге я, человек из целевой ауитории аутлука, знакомый с айти технологиями получаю негативный отзыв системы и считаю ее работу некорректной по отношению ко мне.
Как по мне то это нормально подчеркивать сылки или делать их в виде кнопок. Да, иногда некрасиво, но я не Рембрандта покупаю чтобы им умиляться, а захожу на сайт в поиске информации. Подчеркнутые ссылки облегчают мне работу, а метро-стиль и надежда на мою интуицию осложняют.
Что же, сколько людей, столько и мнений.
Также не стоит отрицать, что в данном вопросе очень большую роль играет банальная человеческая привычка.
Некоторые пользователи, которые сёрфили интернет ещё с незапамятных времен и лично наблюдали появление Web 2.0, сейчас уже действуют по старой привычной схеме и глазами ищут знакомые элементы в сайтах.
У некоторых же пользователей, особенно сегодняшних активных сёрферов в возрасте от 18 до 28 лет не сформировалась подобная привычка и они не чувствуют дискомфорта при работе с сайтами нового формата. И вполне вероятно, что в будущем они будут считать именно этот дизайн нормой.
Также не стоит отрицать, что в данном вопросе очень большую роль играет банальная человеческая привычка.
Некоторые пользователи, которые сёрфили интернет ещё с незапамятных времен и лично наблюдали появление Web 2.0, сейчас уже действуют по старой привычной схеме и глазами ищут знакомые элементы в сайтах.
У некоторых же пользователей, особенно сегодняшних активных сёрферов в возрасте от 18 до 28 лет не сформировалась подобная привычка и они не чувствуют дискомфорта при работе с сайтами нового формата. И вполне вероятно, что в будущем они будут считать именно этот дизайн нормой.
Если глядя на экран, без наведения курсора на элемент понятно, что есть ссылка, а что нет — это хороший дизайн. А еще в ссылках должен быть href.
Я считаю, что ссылки всегда должны быть подчеркнуты. И, соответственно, не стоит подчеркивать никакие другие элементы, а выделять через тег bold, например.
НО!
При нажатии на ссылку пользователь ожидает переход на другую страницу (например, он может кликнуть средней клавишей мыши и откроется другая страница). Если же эта ссылка приведет к открытию всплывающего окна или какого-либо другого действия — её нужно подчеркивать пунктиром. Это дает пользователю понять, что не стоит бояться, что эта вкладка закроется.
А так же есть кнопки — это не ссылки, а служат они для переключения табов и каких-либо действий. Причем, как правило, кнопка — это конкретное действие (отправить, искать и прочее. Стоит заметить, что во всех кнопках, по логике, должен стоять глагол, означающий действие, а не существительные, типа «поиск»).
НО!
При нажатии на ссылку пользователь ожидает переход на другую страницу (например, он может кликнуть средней клавишей мыши и откроется другая страница). Если же эта ссылка приведет к открытию всплывающего окна или какого-либо другого действия — её нужно подчеркивать пунктиром. Это дает пользователю понять, что не стоит бояться, что эта вкладка закроется.
А так же есть кнопки — это не ссылки, а служат они для переключения табов и каких-либо действий. Причем, как правило, кнопка — это конкретное действие (отправить, искать и прочее. Стоит заметить, что во всех кнопках, по логике, должен стоять глагол, означающий действие, а не существительные, типа «поиск»).
Я за подчеркивание, но это не обязательно делать. Тут главное, чтобы они визуально стразу опредилялись как ссылки (на них можна кликнуть).
Я категорически за подчеркивания, и за изменение цвета посещенным ссылкам (:visited). Но если такое случилось и ссылка не подчеркнута, то она должна подчеркиваться при наведении, иначе она как мертвая.
«Можно не выделять» — (6%)79
Б***ь, кто эти люди?! О_О
Б***ь, кто эти люди?! О_О
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Ссылки в интерфейсах