Категория со cтатьями по проектированию пользовательских интерфейсов. Основная масса посвещена интерфейсам в вебе. Рассказывает об основных элементах веб интерфейсов таких как: радиобатонны, чекбоксы, выпадающие списки и поля ввода текста. Затрагивает тему прототипирования интерфейсов, в том числе и бумажное прототипирование. Много материала посвящено дизайну интерфейсов — UI, и созданию правильного пользовательского опыта — UX, который поможет создать интуитивно понятный интерфейс сайта.
26 Сен 2014, 11:00, написал Максим Шайхалов в разделе «Интерфейс»
Статистика измеряет поведение ваших пользователей. Что они делают? Как долго происходит действие? Сколько раз? И много других вопросов.
Статистика всегда объективна
Статистика собирается компьютерами и люди (обычно) не могут на нее влиять. Такие данные имеют совсем небольшую степень погрешности и могут рассказать о том, как посетитель пришел на ваш сайт или какое у него разрешение монитора.
Поэтому статистика никогда не врет.
Возможно вы захотите представить цифры так чтобы они доказывали вашу точку зрения. Не делайте этого! Статистика должна сохранять свою объективность. Читать дальше →
23 Янв 2014, 13:00, написал Максим Шайхалов в разделе «Интерфейс»
Казалось бы в дизайне полей ввода нет ничего сложного: рисуй пустые прямоугольники для ввода данных, все остальное пользователь сделает сам. Однако все не так просто. По объему статьи видно, что правил и особенностей довольно много. Пользователя нужно аккуратно «провести за ручку», все показать, объяснить и помочь. Тогда и только тогда мы сможем получить от него желанные данные. Ну что ж, летс старт!
7+ правил полей ввода
Самое основное правило, как и везде, ставьте себя на место посетителя. Все ли понятно? Можно ли с первого взгляда осознать что нужно ввести в поле? Адекватно ли реагирует поле на введенную информацию?
27 Дек 2013, 12:00, написал Максим Шайхалов в разделе «Интерфейс»
Радиобаттоны — один из самых популярных элементов интерфейса. Настало время рассказать о том как правильно их использовать, для чего они нужны и как их нужно улучшать. Если вы пропустили прошлые выпуски серии статей про улучшение интерфейсов, советую подписаться на рассылку новых постов по почте или по RSS.
— радиобаттон, переключалка или радиокнопка. Кнопка, позволяющая выбрать один параметр из группы. Служит для уточнения параметров и отвечает на вопросы «что именно?», «какой именно?». В отличие от чекбоксов в группе радиобаттонов можно выбрать только один параметр, поэтому они довольно часто используются для опросов.
16 Дек 2013, 13:00, написал Максим Шайхалов в разделе «Интерфейс»
Продолжаю серию статей по улучшению интерфейсных элементов. В этом раз пришла очередь поговорить о чекбоксах. Теперь можно получать уведомления о новых статьях прямо на почту.
Чекбоксы
Чекбоксы (checkboxes) — изначально создавались как элементы группового выбора. Т.е. предназначались для обозначения какой-то группы из элементов для последующих групповых действий с ними.
Хорошие и настоящие чекбоксы есть в Gmail
Примером использования чекбоксов может служить любой современный интерфейс почты. Отметив несколько писем их можно, например, все удалить.
29 Ноя 2013, 13:00, написал Максим Шайхалов в разделе «Интерфейс»
Прогресс не стоит на месте и все движется с космической скоростью. Интерфейсы не отстают и постепенно эволюционируют становясь сложней и одновременно удобней (но это уже разговор для отдельной статьи). В этой серии статей я бы хотел рассказать как можно улучшить большинство типовых интерфейсных элементов используя нехитрые техники.
Выпадающие списки
Выпадающие списки или дропдауны (dropdown) — один из самых неудобных и неэффективных элементов интерфейса. Но несмотря на это, их продолжают применять во всех местах интерфейса. «Почему?» — спросите вы. Ответ прост: дропдауны экономят пространство и помогают спрятать большие списки (вне зависимости насколько это нужно было делать).
10 Июн 2013, 13:00, написал Максим Шайхалов в разделе «Интерфейс»
Этот забавный комикс как нельзя лучше демонстрирует глупость того, что важную информацию нужно располагать на первом экране. Почему это глупость? Обратите внимание на вашу руку с мышкой. Теперь приглядитесь, и возможно, между правой и левой кнопкой, о ужас, вы заметите колесико!
Скрол одно из самых простейших действий в интернете и в 99,7% случаев пользователи прокрутят страницу, чтобы увидеть все. Они знают, что ниже может быть что-то интересное.
Первый экран и почему это считается важным
Понятие первого экрана пришло из газет, где всегда старались располагать все важные штуки выше обычной линии сгиба . Это повышало продажи газет т.к. обычно в таком согнутом состоянии они и лежали на прилавках и видно было лишь верхнюю часть с заголовками.
Что касается веб-дизайна, то здесь первым экраном считается область, которую видит пользователь без прокрутки. Считается, что размещение информации на первом экране повышает конверсию и делает информацию более заметной.
19 Мар 2013, 14:00, написал Максим Шайхалов в разделе «Веб-дизайн,Интерфейс»
16 px – это оптимальный размер шрифта для веб-страниц.
На первый взгляд это утверждение может показаться странным и даже провокационным. Основной шрифт у большинства веб-страниц не превышает 12 пикселей и многие веб-дизайнеры убеждены в том, что это – оптимальный размер для шрифта. Эта статья призвана убедить вас в обратном.
Специалист в области юзабилити сайтов Оливер Рейхенштейн утверждает, что 16 пикселей – это стандарт для нормального отображения шрифта в браузере. При этом шрифт не будет выглядеть гигантским (чего опасаются многие дизайнеры), потому что 16 пикселей – это много только на первый взгляд, а на практике это самый удобный размер шрифта для сайта, в чем уже убедились многие разработчики.
Более того, 16 px – это минимальный размер шрифта для современного сайта, и если вы не поддерживаете этот формат, то лишь напрасно тратите деньги ваших клиентов. Ниже приведены аргументы в пользу актуальности именно такого размера для шрифта.
Доход сайта и привлечение читателей
В большинстве случаев сайт создается с целью заработка, и чем больше у вас будет посетителей, тем большим будет вероятный доход. Если ваш сайт – продающий, то тем важнее для вас привлечь потенциального клиента среди аудитории сети Интернет. Каждый из читателей вашего сайта – это ценный бизнес-актив, который в конце-концов окупит ваши затраты на создание сайта.
Именно поэтому каждый элемент вашего сайта должен быть направлен на достижение конечной цели. Текстового контента это правило касается в первую очередь. Ведь текст на сайте – это основное средство влияние на читателя.
Если в текстах вашего сайта не будет четко указано, каких действий вы ожидаете от пользователя, то он не станет вашим клиентом. А для того чтобы текст эффективно воздействовал на пользователя он должен быть, как минимум, прочитан.
Итак, все ваши действия должны быть направлены на то, чтобы повысить легкость чтения контента для ваших читателей.
12 Ноя 2012, 14:00, написал Максим Шайхалов в разделе «Интерфейс»
Как правило встроенный акселерометр используется лишь для изменения ориентации экрана вашего мобильного устройства. Однако это лишь часть используемых возможностей.
И тем не менее разработка приложениях для различной ориентации требует вдумчивого проектирования. Эта функция должна быть уместна и максимально понятная пользователю.
Большинство приложений на данный момент использует или будет использовать различную ориентацию. В этой статье будут освещены основные понятия необходимые для работы с разной ориентацией.
Использование ориентации для вызова второго экрана
Приложение от YouTube наглядно демонстрирует эту функцию. В портретном режиме у пользователя есть много возможностей по управлению видео и учетными записями. В альбомном же режиме удобно управлять воспроизведением и смотреть видео. После окончания просмотра приложение изменяет ориентацию на портретную что вынуждает пользователя перейти к поиску новых видео.
YouTube в разных режимах.
Но не всегда изменение ориентации работает так продуманно. В CardMunch (визитки в LinkedIn) пользователи могут конвертировать фото визитки в контакт в адресной книге. В альбомном режиме полностью меняется интерфейс представления карт.
В альбомном режиме нет никаких подсказок и ограничено управление. Невозможно, к примеру, добавить новые карточки или же изменить существующие. В итоге, эта карусель вызывает лишь раздражение и недоумение.
CardMunch. Отсутствие визуальных подсказок в альбомной ориентации.
20 Авг 2012, 14:00, написал Максим Шайхалов в разделе «Интерфейс»
Горизонтальные меню – самый популярный вид навигации на сайтах. Такой тип навигации, как правило, используется с целью упрощения представления страниц.
Но тем не менее существует довольно много вариаций горизонтальных меню. У некоторых лучше юзабилити, некоторые смотрятся лучше. В этой статье я бы хотел показать простоту и удобство горизонтальных меню, а также обратить ваше внимание на популярные тенденции и эффективные приёмы, которые помогут вам в работе.
Используйте устоявшиеся названия для разделов
Начнем, конечно, с юзабилити. Меню — одна из первых вещей, на которую обратит внимание посетитель, заходя на новый сайт. Если меню удобно и предсказуемо — им будут пользоваться. Почти любой сайт имеет пункты, которые посетитель ожидает увидеть. Например: «О компании», «Услуги», «Цены» или «Контакты».
Пользователь будет недоволен любой задержкой при поиске нужной ему информации.
Ссылка на страницу с контактной информацией должна называться «Контакты» или «Контактная информация». Соответственно и другие пункты должны иметь устоявшиеся названия. Излишняя изобретательность здесь только навредит.
Это меню удобно, понятно и не создает путаницы. Страницу с услугами компании можно назвать – «То, чем мы занимаемся», только если вам приставят пистолет к голове и заставят это сделать. Когда пользователь впервые на сайте, он ищет знакомые пункты меню и подсознательно избегает незнакомых. Пользуйтесь этим правилом.
23 Апр 2012, 14:00, написал Максим Шайхалов в разделе «Интерфейс»
опять негодует: на большей части сайтов сделанных для продажи отсутствует цена и тривиальная кнопка «Купить». При этом создатели сайтов вроде бы адекватные люди и дизайн у их сайтов вполне на уровне. Однако всему есть свое логическое объяснение.
Хотелось бы оговориться, что речь идет не о интернет-магазинах, а скажем так: о информационных сайтах с перечнем продуктов или услуг. Как выяснилось создатели сайта не хотели размещать цены потому как цена зависит от многих факторов и нужно личное общение, а кнопку «Купить» не стали ставить потому как и так понятно что это можно купить.
Если хотите, чтобы что-то купили:
1. Сделайте очевидное — очевидным вдвойне.
Товар должен выглядеть как товар. Думать над интерфейсом в этом случае никто не будет.
2. Добавьте цену.
Пусть даже в примерном виде «от … р.». Пока нет цены, это не идентифицируется как товар. А купить можно только товар.
3. Укажите действие для покупки.
Нет кнопки «Купить»? Сделайте похожий блок а напишите «Для покупки звонить по этому номеру». Если же такого блока нет, то посетителю остается только гадать что ему делать дальше и как купить товар.
4. Укажите явным образом реакцию на покупку.
Если пользователь не увидит явно что его действие вызвало отклик, он запросто может подумать, что сделал что-то не так или кнопка сломалась. Покупке это уж точно не поможет.
И это всего лишь вершина айсберга, когда пользователя ставят в тупик, не управляют его вниманием.
После того как посетитель открыл ваш сайт в браузере, прочитал все супер-тексты написанные маркетологами и принял решение у него все-таки может остаться вопрос: «Что же дальше?». Если у вас есть кнопка «Купить», то в большинстве своем он ее нажмет. Если нет продолжения, то посетитель скорее всего покинет сайт так и не поняв что делать дальше.
В идеальном мире, кнопки на на все самые нужные вам действия должны быть красивыми и единственными на странице. А кнопки действия, которые вам не так нужны можно и спрятать.
В большинстве своем кнопок лишены:
Рекламные блоки, не баннеры. Например блоки скидки и спецпредложений (в виде каруселей и просто картинок). Как же получить такую скидку?
Список услуг и бонусов. Все круто, но как мне что-то купить из списка?
Страницы тарифных планов. Как мне выбрать этот тариф?
Описания продуктов и услуг. Я прочитал, стиль понравился. Узнал для себя много нового.
Владельцы небольших бизнес-сайтов, обратите внимание на эту проблему и вы повысите свои продажи.
Чекбоксы (checkboxes) — изначально создавались как элементы группового выбора. Т.е. предназначались для обозначения какой-то группы из элементов для последующих групповых действий с ними.
опять негодует: на большей части сайтов сделанных для продажи отсутствует цена и тривиальная кнопка «Купить». При этом создатели сайтов вроде бы адекватные люди и дизайн у их сайтов вполне на уровне. Однако всему есть свое логическое объяснение.