Эволюция интерфейса эл.курса | welcome to eL

Эволюция интерфейса эл.курса

09.01.2014

разработка интерфейса и шаблона для слайдового электронного курса, педагогический дизайн, ux/ui, навигация в электронном курсе, настройка объектов courselab, пример плиточного интерфейса

Джон Лакс: Если хочешь проектировать интерфейсы, нужно выучить одно важное правило: ты должен хотеть делать вещи, которые люди будут хотеть использовать. Ты должен быть одержим тем, как эти вещи функционируют, а не только тем, как они выглядят. Начать — проще простого. Просто сделайте что-нибудь: сайт, мобильное приложение, софт, — не важно. Потом улучшите это. Постепенно, продумывая, как улучшить продукт, придумывайте вещи, которых ещё не существует. Не бойтесь создавать новое и экспериментировать. <...> Хороший интерфейс — тот, которым люди пользуются. Есть много эстетически красивых интерфейсов, но никто ими не пользуется — зачем они тогда нужны? #


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

В компании, в которой я сейчас работаю, некогда был разработан шаблон курса, представленный ниже:




Теперь прикладываем к этому шаблону лист подорожника.




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

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

Логотип УЦ расположен в том месте, где нормальный пед.дизайнер будет размещать кнопки перехода и другие элементы, к которым пользователи будут обращаться для того, чтобы перейти дальше. Также стоит отметить то, что логотип совсем не обязателен, и если уж его и размещать, то так, чтобы он был заметен меньше всех прочих элементов в шаблоне. Либо убрать совсем. В обучении он не играет никакой роли.

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

Как уже было сказано, кнопки перехода размещать нужно справа (подробнее). Туда их и поместим.

Оставляем жить кнопки "Содержание" и "Помощь" + добавляем кнопку "Информация о курсе".

В итоге получаем следующий шаблон:




Это был первый вариант редизайна. И этот вариант нужно улучшать дальше. Поэтому вносим в шаблон следующие изменения:
- Удаляем кнопку "Информация о курсе", которую же сам ранее и добавил (здесь можно прочитать, почему её имеет смысл удалить).
- Вместо неё добавляем кнопку отправки сообщения разработчику. Наличие такой кнопки позволит пользователям оперативно отправлять обратки по курсу (подробнее).
- Добавляем кнопку "Печать". Пусть пользователи имеют возможность распечатывать кадры с таблицами и другой информацией, которую запоминать бессмысленно, а также кадры с той, информацией, которую пользователи захотят всегда иметь под рукой.
- Между кнопками перехода размещаем индикатор, который будет показывать текущий номер кадра и общее количество кадров в разделе.

На выходе получаем второй значительно улучшенный вариант шаблона:




Для контраста приведу в пример альтернативную ветвь развития (ценители плоского дизайна могут даже прослезиться):



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

Важно уделять внимание тому, как размещены элементы интерфейса (кнопки, логотип, визуальные элементы). У каждого активного элемента (кнопки), а также у заголовка, должно быть свое т.н. "охранное поле". Элементы следует размещать "по сетке", максимально аккуратно. Как видно на скриншотах выше (кроме последнего), у всех элементов с левой или правой стороны, снизу и сверху, сохраняется определенное расстояние от границы кадра до границы элемента.

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

Брейден Ковиц: Это не дизайн ради дизайна. Дизайнеры понимают разницу между функциональным и красивым, поэтому мы одержимы деталями (littlebigdetails.com). ... Выверенность деталей повышает доверие. ... Выверенность деталей улучшает юзабилити. ...; Я всегда улыбаюсь, смотря на логотип MailChimp. Отсутствие шума на главной странице Google умиротворяет. Лощёные, попиксельно выверенные интерфейсы Apple восхитительны. У них всё в порядке с деталями, и это создаёт положительное эмоциональное состояние, но почему это имеет значение? Это любопытный феномен нашего мозга. Наше сознание тесно связано с эмоциональными состояниями. В зависимости от того, расстроены мы или счастливы, меняется наш подход к решению проблем. Я определённо был в плохом настроении, озадачен взаимодействием с продуктом, и понял, что нажимаю на одну и ту же кнопку без какого-либо эффекта. Если я расстроен, я делаю то же самое, но интенсивнее. И это не помогает мне достичь цели. Если мы счастливы, работа с интерфейсом воспринимается как игра. ... Важная мысль: проработанные детали могут вызвать позитивные эмоции, которые реально сделают продукт более простым в использовании. #


Что ещё следует добавить в шаблон

Далее рассмотрим как ещё можно улучшить элементы интерфейса уже на примере шаблона курса для компании "Связной".

Заставки курсов. Добавить простые с т.з. дизайна заставки (несколько примеров можно посмотреть здесь). Почти все заставки однотипные и дублируются из курса в курс.

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




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




Существует такая составляющая дизайна интерфейса, как фон. Его наличие или отсутствие в обучающем курсе - это наиболее спорный момент. Фон может отвлекать. Может раздражать. Особенно, если сделать фон ярким и "цветастым". Однако, если его не использовать, будет скучно, безжизненно, на кадре все будет плавать как в "молоке". На данный момент у меня пока нет чёткой аргументации по поводу того, использовать фон или нет, и, если да, то как это лучше сделать. Иногда на кадре нужен "воздух", иногда нужен контраст, которого можно добиться с помощью фонового изображения. Могу ещё пословоблудить, используя цитату с одного дизайн-ресурса:

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


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




И раз уже затронута тема текстовых блоков, размещённых в рамках, отмечу, что в новый шаблон текст размещается именно в рамках (видел много курсов, в которых текст на кадре лепили "голым" вперемешку с картинками).

Вит Ценев: Отсутствие рамок – особенно когда макет имеет очень светлый фон – позволяет взгляду «соскользнуть» с текста. Представьте, что взгляд – это хоккеист, катающийся на ледовом поле, где нет ограды, а только лишь цветовая разметка на льду. Очень легко выкатиться за пределы этой воображаемой границы. Рамка же играет роль борта, в который хоккеист «ударится» и останется на поле, – по крайней мере, до тех пор, пока он этого хочет. #


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




Новый индикатор загрузки слайда:




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




Теперь рассмотрим шаблоны курсов, которые я разрабатываю для компании "Связной". Шаблон всё ещё дорабатывается. Опишу то, что останется в последующих версиях.

Появляющиеся информационные окна, содержащие дополнительную информацию, описание заданий и пр. Ранее использовались объекты CL (глоссарий, помощь), которые вызывались на кадре с помощью действия МЕТОД. У этих объектов ряд недостатков. Во-первых, они глючные. Во-вторых, редактировать содержание внутри этих объектов лично мне не удобно. На данный момент все такие окна теперь появляются в модальном режиме на затемненном фоне и вызываются с технических кадров (на которые пользователь попасть не сможет). Выглядит это так:




Модальный режим с затемнением позволяет:
- выделить окно на фоне основного содержимого на кадре,
- сохранить видимость кадра на котором находится пользователь, чтобы у него не создавалось впечатления, что он "нырнул" непонятно куда (видны заголовок кадра, а также частично содержание кадра).

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




Одним из таких появляющихся окон является окно "Содержание". Остановимся на нём подробнее, так как оно значительно переработано.

В чём минусы встроенного объекта CL "Содержание"? В том, что опять же не позволяет выполнить гибкие настройки этого объекта. Кроме того, оно жёстко привязано к количеству и последовательности слайдов в модуле (если слайдов 10, то и пунктов в содержании будет 10, очередность которых будет соответствовать фактической очередности слайдов в модуле). Вдобавок это окно недостаточно информативно. К примеру, оно должно показывать, какие слайды пользователь посмотрел, а какие - нет. На самом деле оно показывает, посмотрел ли пользователь самый первый кадр на слайде, а вся совокупность кадров на слайде при этом не учитывается.

Сейчас окно "Содержание" выглядит так:




Данное окно я могу редактировать, как душе угодно. Как можно видеть, в этих примерах содержание представлено в виде списка. Однако от встроенного окна CL оно выгодно отличается за счёт следующих улучшений:
- визуальная разбивка по категориям (если разбивать курс по модулям по тем или иным причинам нельзя, а разделов в нём достаточно много),
- показан статус прохождения раздела.

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




А теперь ещё раз вернемся к заставке курса. Ключевое изменение нового формата заставки в том, что название кнопки "Начать обучение" меняется на "Продолжить обучение", если пользователь открывает курс не в первый раз.






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




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





Какие элементы я вообще не использую в интерфейсах и почему

Индикатор прохождения, например, в виде линии из квадратиков. Причина: сложно посчитать и отобразить количество кадров в пределах одной темы, и если кадра всего 2, то эти 2 квадратика смотреться будут глупо. Видимое количество кадров и реальное их количество часто не совпадает. Иногда количество кадров в одной теме может уменьшиться, прохождение не всегда линейное и пр. А бывает и так, что в пределах одной темы содержится всего один кадр. Хотя у такой полосы есть возможность перемещения на любой слайд/кадр, я не уверен, что большинство пользователей легко сориентируются как с 25-го кадра точно попасть на тот, который им сейчас вдруг понадобился (им так или иначе придётся перебирать кадры в пределах 6-10 шт.). Разве что кто-нибудь когда-нибудь сможет улучшить эту функцию за счёт добавления возможности проставления пользователем отметок на тех кадрах, к которым они могут захотеть вернуться позже (в результате такие кадры на полосе будут визуально отличаться от остальных), либо возможности посмотреть превьюшку кадра при наведении курсора на квадратик.

Текстовое обозначение кнопок управления курсом (кроме кнопки запуска курса). При обозначении таких кнопок важно, чтобы они моментально считывались пользователем. Очевидно, что если для 5-6 кнопок на панели управления вместо пиктограмм использовать надписи, то выглядеть они будут практически одинаково и будут отличаться только по длине. Да, иногда моментальная считываемость пиктограммы не достижима, например, если это кнопка вызова окна с содержанием. Но это лишь одно исключение. Использование пиктограмм позволит сделать кнопки более узнаваемыми, легко находимыми. Также это позволит сэкономить пространство на кадре и избавиться от лишнего визуального шума.

Обозначение кнопки запуска курса с помощью пиктограммы вместо надписи. То, что написано выше, не относится к кнопке запуска курса, потому что она на заставке курса присутствует одна (во всяком случае так должно быть) и её не с чем спутать. Однако создавать загадки для пользователя в самом начале курса, типа "что означает эта иконка, похожая на кнопку PLAY" (воспроизведение музыки, начать просмотр видео?), совершенно бессмысленно.

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




В заключение приведу описание принципов UX-дизайна (источник). Они очень простые. А для дизайнеров, наверное, слишком очевидные. Каждый принцип сопровождается комментарием по поводу того, для чего тот или иной принцип используется. Все они основаны на знании психологии восприятия.

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