Собственно, переходим в любой блог кликаем на ссылку «Все» — и ничего особенного не происходит, подгружается та же страница блога (что естественно, так как в href у нее прописан адрес активного блога). Ссылка «Персональные» работает исправно.

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

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

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

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

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

Или все следуют кем-то выбранному шаблону?

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

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



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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну что, друзья, делайте скрин старого hh.ru, сохраняйте в архиве для потомков и добро пожаловать на новый HeadHunter: hh.ru/new_design

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

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

        Возможности меню, реализованные в данной статье:

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

        Исходный код директивы можно посмотреть тут.

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

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

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

Новый формат статьи: без текста, только схемы. Надеюсь, нарисовал понятно.

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

Когда владелец сайта ежедневно взаимодействует со своим информационным ресурсом, он привыкает к навигации и с легкостью находит информацию. Недостатки и огрехи в юзабилити становятся незаметны или кажутся столь незначительными, что «все не до этого». Но как быть новому пользователю? Сориентироваться, порой, не то что сложно – невозможно! Особенно если владелец сайта не сумел найти баланс между информативностью (ведь всё так важно и обо всем нужно рассказать на страницах сайта), его навигацией и элементами юзабилити. В итоге на интернет-ресурсе «ногу сломать» можно.