Что такое интерфейс торговой программы

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

Значение интерфейса в успешности интернет-магазина

User Interface или пользовательский интерфейс (UI) – все, что видит посетитель, заходя на веб-сайт. Кнопки, картинки, текст, меню, разделы, блоки отражают ассортимент компании, указывают на возможности для покупателя и предоставляют способы их реализации.

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

Урок 3 — Интерфейс программы и основные функции меню

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

UI онлайн-магазина выполняет три основных задачи:

1. Ознакомительная. Знакомит целевую аудиторию с компанией и конкретным товаром.
2. Маркетинговая. При условии соответствия требованиям клиента дает компании эффективную бесплатную рекламу.
3. Мотивирующая. Располагает пользователя к покупкам, ускоряет процесс конвертации случайного посетителя в постоянного покупателя.

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

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

Правильный UI, удовлетворяющий потребности покупателя, составляет оптимальный баланс между навигацией и информационной архитектурой сайта. Благодаря этому клиент:

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

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

Этапы разработки дружественного интерфейса

Дружественный веб-интерфейс предрасполагает посетителей к взаимовыгодному «общению» с ресурсом. Это и есть его главная задача, воплотить которую поручают дизайнеру UI. Но прежде владелец магазина должен сформулировать точные цели и расставить правильные приоритеты.

Урок 3 — Интерфейс программы и основные функции меню

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

Цикл разработки состоит из нескольких этапов:

1. Анализ ЦА. Составление портрета потенциального клиента, выявление конкретных требований, ожиданий и подходящих условий.
2. Создание примерного эскиза функций. Подробное планирование функциональных возможностей будущей площадки.
3. Формирование концепции. Детальная предварительная прорисовка итоговой картинки, обдумывание элементов и планирование структуры веб-сайта.
4. Оформление. Подборка цветовой гаммы, текстуры, шрифтов, визуальное выделение главных элементов. Создание конечного продукта.
5. Тестирование. Устранение допущенных ошибок.

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

Главные элементы структуры

В идеале интерфейс магазина включает следующие основные элементы структуры:

• шапка;
• каталог товаров;
• товарные страницы;
• поиск;
• корзина;
• форма обратной связи.

Пройдемся по каждому из них подробнее.

Шапка

Шапка онлайн-магазина – информативный верхний блок, который бросается в глаза на этапе беглого ознакомления с сайтом. Его нельзя нагромождать сложными композициями из множества рисунков.

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

Каталог товаров

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

Ключевое предназначение рубрикатора – помочь пользователю отыскать нужную страницу за минимальное количество кликов. Причем у юзера должна всегда оставаться возможность вернуться к предыдущему действию с помощью простой навигационной цепочки. Удобным дополнительным инструментом для структурирования товаров служат фильтры. Они выстраивают позиции в соответствии с заданными критериями: код, цена, производитель, материал изготовления.

Товарные страницы

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

Информацию о доставке и способах оплаты можно расположить в виде коротких блоков, разворачивающихся при нажатии. Обязательный элемент карточки – конверсионная кнопка «Купить» или «Добавить в корзину». Лучше выделить ее, используя цветовые акценты.

Поиск

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

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

Корзина

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

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

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

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

Форма обратной связи

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

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

Помимо перечисленных элементов структуры, есть еще множество компонентов UI, добавляющих ресурсу удобства и признания аудитории. Советуем использовать в магазине виджеты и кнопки соцсетей, блоки с акционными предложениями, кнопки для быстрой покупки в один клик. Также не забывайте о служебных, информационных страницах и их грамотном наполнении («О нас», «Доставка и оплата», новости, блог).

10 основных характеристик правильного интерфейса

Идеальный веб-интерфейс магазина, который работает на владельца, обладает такими ключевыми характеристиками:

1. Простота и предсказуемость. Располагайте элементы согласно принципам элементарной логики. Не запутывайте посетителей нестандартным размещением блоков, присваивайте кнопкам понятные значения. Старайтесь не использовать изображения и иконки, которые могут ввести в заблуждение.

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

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

Желательно отказаться от множества всплывающих pop-up, навязчивой рекламы, отвлекающей анимации.

3. Быстрая загрузка. Медленно загружающийся интерфейс раздражает посетителей, формирует неприязнь к ресурсу. Контролируйте скорость загрузки, соотнося ее с оптимальными показателями для комфортного использования. Чтобы сайт быстрее загружался, нужно освободить его от слишком «утяжеляющих» элементов.

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

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

6. Привлекательность. Помимо удобства и функциональности обращайте внимание на внешний вид ресурса. Постарайтесь разработать приятный дизайн с учетом особенностей целевой аудитории онлайн-магазина.

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

8. Понятный язык. Говорите на языке клиента. Текстовый контент и все обозначения необходимо составлять под целевую аудиторию. Для молодежи уместна легкая разговорная речь, для бизнесменов – деловой язык, для людей конкретных профессий – специфические термины.

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

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

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

Оставляйте возможность полного отключения такой возможности.

Что такое юзабилити и почему это важно

Одной из важнейших характеристик интерфейса является удобство пользования и простота взаимодействия с сайтом. Данный критерий оценивается термином «юзабилити».

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

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

Выводы

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

Источник: www.insales.com

Универсальный информационный интерфейс торговых систем

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

Для просмотра хода торгов используются стандартные таблицы и окна программ для клиентов (например, Рабочего места QUIK), в которых появляются дополнительные классы инструментов.

Интерфейс является информационным и не предназначен для передачи торговых транзакций.

Универсальный интерфейс представляет собой программную библиотеку (DLL), содержащую необходимые функции сервера QUIK и адаптированную к составлению программ на языках C/С++ и Pascal/Delphi. Он создает на сервере QUIK новый источник данных в виде одного или нескольких классов инструментов.

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

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

Получаемые данные

1. Определение классов: описание классов финансовых инструментов, параметров финансовых инструментов, списка финансовых инструментов по классам.
2. Описание торговых счетов фирм.

1. Описание изменений параметров инструментов: текущих значений параметров, списка всех заключенных сделок, лучших котировок на покупку и продажу.
2. Описание параметров заявок и сделок: заявок фирм, адресных заявок фирм, сделок фирм.

Источник: arqatech.com

Юзабилити торговых терминалов: UX-тенденции мобильных и десктоп-приложений для торговли на бирже

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

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

Мобильные торговые приложения: от сложного к простому

Сфера онлайн-трейдинга стала одной из первых, где разработчики обратили свой взор на мобильную среду. К примеру, в России первое мобильное торговое приложение появилось уже в 2003 году — это был созданный специалистами ITinvest терминал Pocket Trade для работы на устройствах с Windows Mobile 2003.

Тогда еще не сформировалось понятие «мобильной версии», которая по умолчанию в чем-то уступает десктопной версии приложения. Поэтому пользователи ожидали получить на мобильном устройстве полнофункциональный вариант привычного приложения. Этого позволяла добиться и сама операционная система — взаимодействие с ее интерфейсом осуществлялось с помощью стилуса, а значит, существовала возможность уместить на экране больше элементов, не боясь, что они окажутся слишком мелкими для человеческого пальца.

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

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

Но не Windows Mobile единой был жив мобильный трейдинг в начале двухтысячных годов. Тогда одной из самых популярных мобильных операционных систем была Symbian. С ней проблема заключалась в нетривиальном процессе установки приложения, кроме того существовала необходимость как-то ограничивать потребление трафика — тогда и в России, и в других странах мобильный интернет стоил достаточно дорого. Чтобы охватить пользователей Symbian и решить проблему с потреблением ресурсов мы решили сделать терминал для этой платформы в виде браузерной веб-версии (соответственно, пользоваться им могли и обладатели телефонов на других ОС и даже десктопов).

При этом функциональность Pocket Trade Web не намного уступала версии под Windows Mobile — существовала возможность просмотра состояния счета и портфеля, таблицы котировок, графиков, новостей, а также совершения торговых операций.

Стремлению по-максимому перенести функциональность десктоп-версии в мобильную среду положил конец старт «эры iPhone». Стив Джобс сделал свое знаменитое высказывание («Кому нужен стилус? У каждого человека их десять!»), а новый смартфон был заточен под управление с помощью пальцев. Ирония здесь заключается в том, что спустя десятилетие с этого момента, Apple все-таки выпустила собственный стилус, но философия Джобса к этому времени уже кардинально изменила то, как разрабатываются мобильные приложения, в том числе и для торговли на бирже.

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

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

Еще одним будущим направлением развития мобильных торговых приложений могут стать смарт-часы — некоторые разработчики (в их числе и создатели Robinhood) уже анонсировали версии торговых терминалов под Apple Watch. Экран часов еще меньше, чем на смартфоне, соответственно, созданные под него приложения позволят пользователям совершать лишь еще более ограниченный набор операций.

Десктоп-приложения: не все так просто

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

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

Описание алгоритма в программе TSlab

Создание торгового робота в интерфейсе инструмента LiveTrade

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

К примеру, в блоге на Geektimes мы рассматривали историю знаменитого биржевого терминала Bloomberg — несмотря на то, что многим дизайнерам, сторонним наблюдателям и новым пользователям, привыкшим к более простым программам, его интерфейс кажется абсолютно недружелюбным, его давние пользователи наоборот выступают против его «облегчения» и упрощения.

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

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

В области разработки десктоп-торгового софта можно выделить тенденцию не к его упрощению, а к наращиванию функциональности, повышению скорости работы (о том, как мы оптимизировали собственный терминал SmartX можно узнать из этого топика на Хабре) и предоставлению больше гибкости.

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

Заключение

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

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

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

P. S. В команду разработчиков ITinvest для проектной работы над торговыми приложениями требуется сильный разработчик. Наши требования и пожелания к кандидатам:

• Хорошее знание ООП и опыт разработки высоконагруженных приложений на C++, опыт разработки на C#;
• Знание стандартных алгоритмов;
• Опыт разработки многопоточных приложений;
• Умение пользоваться системами контроля версий;
• Представление о работе финансовых протоколов (FIX, FAST, ASTS Bridge).

• юзабилити
• софт
• фондовый рынок
• торговые терминалы
• интерфейсы
• мобильные приложения
• десктом
• пользовательский опыт
• эволюция

Источник: habr.com