Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Ссылка «Все» на странице блога

Habr
Собственно, переходим в любой блог кликаем на ссылку «Все» — и ничего особенного не происходит, подгружается та же страница блога (что естественно, так как в href у нее прописан адрес активного блога). Ссылка «Персональные» работает исправно.
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 563
Комментарии 1

В корзину. В корзину? В корзину!

Интерфейсы *


Никто не задумывался о том насколько противоречив этот, всем привычный и понятный элемент «Корзина»?

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

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

Т.е. выработался не совсем приятный шаблон в названии метафор.
И меня интересует, кто-то предпринимал попытки этот шаблон нарушить или нет?

Например назвать на сайте раздел «Сделать заказ» или «Список покупок», вместо «Добавить в корзину»?
Интересно, кто-то подобный эксперимент уже проделывал?

Или все следуют кем-то выбранному шаблону?
Всего голосов 10: ↑4 и ↓6 -2
Просмотры 785
Комментарии 41

Открытие и просмотр множества рекомендаций одним кликом

Интерфейсы *
Правильные рекомендации — это залог прогресса любого Интернет магазина. Если пользователю неудобно бегать по сайту — он быстро с него уходит к конкуренту.

Типичный магазин предоставляет нам продукты списками или долгими столбиками:

product listings

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

Типично процесс происходит где-то так: увидел список, нажал на первое понравившееся наименование, подождал пока загрузится страница, просканировал, вернулся обратно, открыл другой продукт, подождал пока загрузиться страница,… после 10-ти просмотров повторно открыл первый вариант… и т.д.… много кликов, много времени уходит на ожидание и перегрузку страниц.

Читать дальше →
Всего голосов 27: ↑24 и ↓3 +21
Просмотры 2.2K
Комментарии 11

Плагин Links2Tabs: открываем и просматриваем все ссылки одним кликом

WordPress *
Здравствуй Хабр!

Месяц тому писал как можно много сайтов на одной странице разместить для пересылки и открытия одним кликом.

На днях вышел Вордпрес плагин, который делает следующее.

1. Сканирует каждый пост и / или страницу и находит там все ссылки.

2. Группирует эти ссылки в одну.

3. Внизу поста добавляет линк, при нажатии на который всё открывается в табах одним кликом.

About Habr

Вопрос: зачем мне и моим читателям это нужно?

Читать дальше →
Всего голосов 41: ↑30 и ↓11 +19
Просмотры 2.8K
Комментарии 18

Навигация по сайту: задачи и инструменты

Веб-дизайн *Интерфейсы *Usability *

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

Читать дальше →
Всего голосов 63: ↑60 и ↓3 +57
Просмотры 28K
Комментарии 31

HTML5 History API уже сегодня и без ограничений

Разработка веб-сайтов *JavaScript *API *

Библиотека для работы HTML5 History API


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

На сегодняшний день библиотеку я могу смело назвать, на мой взгляд, полноценно законченной. Конечно же, ошибкам в работе библиотеки думаю, место будет, тестировалась библиотека мною в разных условиях и браузерах, но как вы понимаете, все не уловишь, да что-то упустишь. И так давайте приступим к описанию возможностей и тонкостей библиотеки.
Читать дальше →
Всего голосов 85: ↑84 и ↓1 +83
Просмотры 61K
Комментарии 49

Хватит неправильно использовать выпадающие списки

Интерфейсы *Usability *
Перевод
Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).

Когда использовать


Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.



Читать дальше →
Всего голосов 135: ↑128 и ↓7 +121
Просмотры 128K
Комментарии 103

Навигация: вариант реализации для корпоративного приложения

Разработка веб-сайтов *Java *Анализ и проектирование систем *
За мою карьеру от простого разработчика до архитектора приходилось работать над приложениями разного масштаба и степени сложности. Последние несколько лет я работал над системой управления школами и системой управления медицинскими препаратами. Приходилось решать различного рода проблемы, связанные с навигацией по приложению. Но в зависимости от используемых фреймворков, не всегда удавалось найти удобное решение. Всегда казалось, что чего-то не хватает.

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

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

В данной статье я бы хотел рассмотреть один из вариантов реализации навигации по приложению, шаг за шагом, описывая задачи, которые приходилось решать и к каким результатам это всё привело.
Читать дальше →
Всего голосов 21: ↑17 и ↓4 +13
Просмотры 13K
Комментарии 5

Справочник фронт-энд девелопера: виды горизонтальных панелей навигации

CSS *HTML *

Предисловие: работая верстальщиком, ваш покорный слуга заметил, что существует несколько типов меню; при этом для верстки каждого из них следует использовать свои приемы.
Подробности — под катом.
Читать дальше →
Всего голосов 81: ↑69 и ↓12 +57
Просмотры 56K
Комментарии 16

Ребрендинг REG.RU: проще, удобнее, эффективнее

Блог компании REG.RU


Как лидер среди российских доменных регистраторов и хостинг-провайдеров REG.RU не только предчувствует изменения рынка, но и во многом задает вектор его развития. Компания обладает широким портфелем различных услуг (от регистрации доменов и услуг хостинга до сервисов SEO-продвижения и контекстной рекламы), что делает REG.RU отправной точкой для развития бизнеса в Интернете.

Одной из главных целей ребрендинга стало раскрыть общественности наши главные ценности: простоту, удобство, наглядность и эффективность. Изменения коснулись всех составляющих корпоративной идентификации REG.RU, но, конечно, самыми яркими и заметными элементами ребрендинга стали обновленный дизайн сайта, логотип и фирменный стиль компании. О них и пойдет речь в посте.
Читать дальше →
Всего голосов 17: ↑12 и ↓5 +7
Просмотры 6.3K
Комментарии 20

Эффективное упрощение навигации, часть 1: информационная архитектура

Веб-дизайн *Usability *
Перевод

От переводчика


Решила сделать перевод одной интересной статьи по упрощению навигационной системы сайта. Это только первая часть про структурирование контента на сайте. Она достаточно объемная, но от этого не менее интересная, надеюсь Вы не устанете читать. Здесь содержаться достаточно подробные пояснения как сделать информационную архитектуру проще и понятней, особенно для крупных сайтов с большим количеством контента, вроде интернет-магазинов.
Если найдете какие-то ошибки, пожалуйста, напишите в лс, я исправлю.
Поехали!

Читать дальше →
Рейтинг 0
Просмотры 7.1K
Комментарии 1

Публичный тест нового интерфейса HeadHunter

Блог компании HeadHunter Веб-дизайн *Интерфейсы *Usability *


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

Пока это тестирование, но если оно пройдет успешно (в том числе, надеюсь, и с вашей помощью), то запустим на 100% пользователей. Обратите внимание на новый личный кабинет, главное меню, поиск, который теперь есть на всех страницах, резиновый дизайн и многое другое. Тест работает на hh.ru, поэтому из других стран может не включиться.

Ну что, друзья, делайте скрин старого hh.ru, сохраняйте в архиве для потомков и добро пожаловать на новый HeadHunter: hh.ru/new_design
Всего голосов 52: ↑33 и ↓19 +14
Просмотры 28K
Комментарии 76

Эффективное упрощение навигации, часть 2: Навигационные системы

Веб-дизайн *
Перевод


Как сделать навигацию как можно проще и предсказуемей? Как было показано в части 1, во-первых, нужно структурировать контент так, чтобы он естественным образом сужал навигационные варианты выбора, во-вторых, пояснить все варианты выбора так, чтобы минимизировать умственную нагрузку на пользователей. Тем не менее, необходимо два дополнительных шага – выбрать правильный тип навигационного меню, а затем сделать для него подходящий дизайн. Вторая часть этой серии рассказывает о третьем шаге и рассматривает какие типы навигационного меню лучше всего подходят к какому контенту.
Читать дальше →
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 12K
Комментарии 0

Адаптивное многоуровневое меню сайта с саморегистрируемыми пунктами на основе директивы AngularJS

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

        Возможности меню, реализованные в данной статье:
  1. Вся начинка меню спрятана под капотом директивы. При верстке html страницы указывается лишь DOM-элемент с директивой, что повышает читабельность кода.
  2. У меню есть возможность создавать пункты с бесконечным уровнем вложенностей.
  3. Подсветка активной страницы в меню осуществляется не только на первом уровне, но и на любом уровне вложенности.
  4. Возможность зарегистрировать пункт меню на этапе конфигурации приложения.
  5. Возможность отображения/сокрытия конкретных пунктов меню в зависимости от прав доступа текущего пользователя.

        Исходный код директивы можно посмотреть тут.
Подробности смотри ниже
Всего голосов 8: ↑6 и ↓2 +4
Просмотры 14K
Комментарии 0

CleverScrollbar.js — Сайдбар для понятной навигации

JavaScript *Программирование *

Для тех, кому хочется сразу посмотреть, о чём идёт речь: пример работы библиотеки. Нажмите на кнопку "Load Scrollbar!", чтобы увидеть результат.


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


Есть одна проблема с юзабилити на подавляющем большинстве сайтов, которая меня сильно раздражает. Суть проблемы заключается в том, что ты не имеешь возможности узнать, сколько процентов от всего контента на странице занимает, собственно, самая важная его часть. Или, если на сайте есть множество блоков, идущих один за другим — ты не имеешь возможности быстро переключаться между ними.

Читать дальше →
Всего голосов 33: ↑32 и ↓1 +31
Просмотры 8.7K
Комментарии 28

10 грехов в системах навигации сайтов / приложений

Веб-дизайн *Интерфейсы *Usability *
Recovery mode
Новый формат статьи: без текста, только схемы. Надеюсь, нарисовал понятно.


Читать дальше →
Всего голосов 106: ↑78 и ↓28 +50
Просмотры 37K
Комментарии 416

10 самых простых и частых ошибок на сайтах

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

Когда владелец сайта ежедневно взаимодействует со своим информационным ресурсом, он привыкает к навигации и с легкостью находит информацию. Недостатки и огрехи в юзабилити становятся незаметны или кажутся столь незначительными, что «все не до этого». Но как быть новому пользователю? Сориентироваться, порой, не то что сложно – невозможно! Особенно если владелец сайта не сумел найти баланс между информативностью (ведь всё так важно и обо всем нужно рассказать на страницах сайта), его навигацией и элементами юзабилити. В итоге на интернет-ресурсе «ногу сломать» можно.
Читать дальше →
Всего голосов 13: ↑9 и ↓4 +5
Просмотры 17K
Комментарии 12