Файл: Курсовая работа по дисциплине Разработка интерфейса цифрового продукта по теме Создание интерфейса сайта организации по аренде прогулочных велосипедов.docx
Добавлен: 26.10.2023
Просмотров: 294
Скачиваний: 16
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Глава 4. Критерии эффективного интерфейса
Пользовательский интерфейс — мост между человеком и машиной. Эффективный интерфейс обучает пользователя, экономит время, защищает от ошибок, говорит с ним на одном языке в контексте использования.
7 пунктов, которые просто необходимы действительно хорошему интерфейсу:
1. Доходчивость.
Доходчивость - самый важный элемент дизайна интерфейса пользователя. В действительности единственным назначением интерфейса является организация возможности для посетителей взаимодействовать с системой с помощью содержания и функций. Если люди не могут догадаться, как работает приложение или куда надо двигаться на сайте, они будут сбиты с толку и разочарованы.
2. Лаконичность.
Доходчивость интерфейса - замечательная штука, однако следует соблюдать осторожность, чтобы не перегрузить сайт информацией. Очень просто добавлять описания и объяснения. Но каждый раз, когда мы делаем это, мы увеличиваем общую массу сайта. Если добавить слишком много объяснений, то пользователь будет вынужден проводить много времени за чтением инструкций.
3. Узнаваемость.
Многие дизайнеры стремятся сделать интерфейс интуитивным. А что значит интуитивность в действительности? Это значит, что что-то может быть распознано и понято инстинктивно и естественно. А как можно сделать что-то интуитивным? Сделайте это похожим. Похожесть — это что-то такое же, как то, что Вы уже встречали ранее. Если Вы видите что-то одно похожее на другое, то Вы знаете, как оно действует, Вы знаете, что можно ожидать. Выделите объекты, которые похожи для Ваших пользователей и интегрируйте их в Ваш интерфейс.
4. Восприимчивость.
Восприимчивость подразумевает два пункта. Первый, короткое время отклика. Интерфейс, если за ним нет программного обеспечения, должен работать быстро. Ожидание загрузки и использование медленного и инертного интерфейса приводит к разочарованию. Возможность видеть элементы интерфейса быстро (даже если контент еще не полностью загружен) значительно улучшает удовлетворенность пользователей.
Восприимчивость также означает, что интерфейс выдает некоторую форму обратной связи на действия пользователя. Посетителя надо информировать о том, что происходит. Нажатие на кнопку было воспринято системой? Как об этом можно узнать? Кнопка должна отобразить состояние "нажата", чтобы пользователь увидел реакцию на свои действия.
5. Последовательность.
Адаптация интерфейса для заданного контекста — это правильное решение, но должен оставаться уровень последовательности, который проходит через весь проект. Последовательность интерфейса позволяет пользователю развивать шаблоны использования
проекта - они изучают различные кнопки, закладки, иконки и другие элементы интерфейса, распознают их при последующей работе и быстрее начинают использовать в другом контексте.
6. Привлекательность.
Привлекательным в том смысле, что его использование доставляет удовольствие. Когда программное обеспечение имеет привлекательный интерфейс, пользователи и персонал не просто используют его - они предвкушают работу с ним. Конечно, существуют различные типы программного обеспечения и сайтов, предназначенные для разных рынков и аудиторий. То, что для одних выглядит хорошо, является плохим для других. Это означает, что следует разрабатывать внешний вид и функциональность для своей аудитории.
7. Снисходительность.
Никто не совершенен, и люди делают ошибки, когда пользуются программным обеспечением или веб-сайтом. То, насколько хорошо контролируются такие ошибки, является очень важным индикатором качества интерфейса. Не надо заставлять паниковать пользователя - нужно сделать снисходительный интерфейс со средствами от ошибок. Такой интерфейс позволит пользователям избежать дорогостоящих действий.
Заключение: Работа над приведенным списком полна противоречий и взаимоисключений. Например, попытка сделать доходчивый интерфейс может привести к тому, что будет добавлено много описаний и объяснений, что сделает весь проект большим и неуклюжим. Усилия по приданию лаконичности может привести к тому, что многие пункты приобретут двусмысленность. Достижение оптимального баланса требует усердия и времени, а также зависит от конкретных условий реализации проекта.
Глава 5. Концептуальное проектирование пользовательского интерфейса
Сайт будет состоять из главной страницы с уникальным торговым предложением, в нем мы обозначим минимальную стоимость проката велосипедов и меньшим шрифтом информацию о преимуществах организации, а именно: бесплатная доставка, минимальная стоимость и отсутствие залога.
Ниже мы расположим большую выделяющуюся по цвету кнопку с призывом к действию "Выбрать велосипед", переходя по этой кнопке, пользователь попадает в раздел с велосипедами и их стоимостью. В данном разделе модели и стоимость будут оформлены в виде «карточки товара». В этой карточке будет показано изображение велосипеда, название, его характеристики, стоимость и оптимальное предложение, например, аренда велосипеда на 3 и более месяцев. В карточке будет вставлена кнопка «Выбрать велосипед». При нажатии на неё будет открываться окно с формой заполнения. Пользователь должен будет указать свои данные и выбрать способ получения, для дальнейшей связи с менеджером.
Правила использования будут после главной страницы, в них мы опишем момент взятия, процесс использования велосипеда и его возвращение обратно. Все это будет покано в виде поэтапной схемы.
Далее будет размещен раздел с картой станций по аренде велосипедов. Будет две вариации просмотра карты: либо графически, либо списком. В случаи с графическим изображением, при наведении или нажатии на станцию будет показываться точный адрес, номер телефона и график работы.
В разделе контакты будут обозначены основные номера телефонов и почтовые ящики для быстрой связи.
Также на сайте будет раздел «Вопрос-ответ», в котором будут обозначены часто задаваемые вопросы про сервис и ответы на них. Для более удобного использования вопросы будут поделены на категории: велосипеды, доставка, возврат, обслуживание.
Глава 6. Макетирование общей структуры взаимодействия
Опираясь на концептуальное проектирование в предыдущей главе, создадим макет общей структуры сайта. В нем покажем в общих чертах расположение элементов на каждой странице сайта и то, как эти элементы будут взаимодействовать между собой. (см. Приложение №8)
Используем закон Фиттса для оценки эффективности взаимодействия пользователя с интерфейсом.
Закон Фиттса — общий закон, касающийся сенсорно-моторных процессов, связывающий время движения с точностью движения и с расстоянием перемещения: чем дальше или точнее выполняется движение, тем больше коррекции необходимо для его выполнения, и соответственно, больше времени требуется для внесения этой коррекции. Используется в основном в компьютерной графике. Закон опубликован Полом Фиттсом в 1954 году.
Можно описать закон Фиттса простыми словами:
- Чем больше цель и чем ближе она находится к человеку, тем быстрее получится ее достичь.
- И наоборот: чем меньше цель и чем она дальше, тем больше времени потребуется для ее достижения.
Оценка эффективности взаимодействия пользователя с интерфейсом:
Текст, в котором мы обозначили преимущества организации на главной странице, находится по центру (если мы говорим о широких экранах, то пользователь быстрее сориентируется на сайте с блоками контента, которые расположены по центру. А вот смещенные влево или вправо потребуют дополнительных усилий.)
Сделали элементы, которые хотим выделить, большими и расположили их поближе к пользователям. На главной странице в нашем случаи это особенно актуально для кнопки "Выбрать велосипед», назначение которой в том, чтобы её было легко найти и выбрать.
На нашем сайте кнопки в меню имеют увеличенную кликабельную область (область клика за пределами текста), чтобы пользователи не прицеливались для нажатия на текст.
Глава 7. Предоставление визуального решения
Опираясь на концептуальное проектирование и макетирование общей структуры взаимодействия, мы создали интерфейс для сайта организации по аренде прогулочных велосипедов. Выбрали для фона черный цвет, на котором любой цвет будет смотреться еще ярче и привлекательнее. Также на протяжении всего сайта нам встречаются абстрактные фигуры яркого желто-оранжевого и розового цветов, оформленных градиентом. Рассмотрим каждую страницу отдельно.
Главная страница.
В центре надпись "Аренда велосипедов от 2500 рублей в месяц", которая сразу должна вызвать интерес у пользователя. Далее обозначили, что наша организация бесплатно доставляет велосипеды и работает без залога. Все это в совокупности держит пользователя на сайте. Чуть ниже по центру расположили контрастирующую кнопку "Выбрать велосипед", она довольно большая и расположена близко к пользователю, что позволяет ее легко найти. Если мы кликаем по этой кнопке, то переходим в раздел с велосипедами и их стоимостью.
Как пользоваться?
Процесс использования мы оформили в виде поэтапной схемы, с пронумерованными пунктами. Каждый пункт состоит из: номера, заголовка и описания этапа. Всего 4 этапа: оплата, получение, возможный обмен или ремонт и сдача велосипеда обратно. Также на данной странице изображена тройная стрелка, показывающая вниз на следующую страницу, которая является для пользователя определенным импульсом для дальнейших действий.
Велосипеды и стоимость.
Модели велосипедов оформлены в виде карточек товара белого цвета. Обозначено название, тип, характеристики и стоимость велосипеда на 1 месяц, и также на 3 месяца, что гораздо выгоднее; текст, на который пользователь должен обратить прежде всего внимание, выделен жирным шрифтом. И в конце карточки добавлена кнопка желтого цвета "Выбрать велосипед". При нажатии на эту кнопку, всплывает окно, в котором нужно заполнить данные пользователя и способ получения, и нажать на кнопку "Оформить". Данная страница тоже оформлена цветными элементами.
Карта станций.
На странице с картой мы сделали два варианта просмотра станций: либо графический, либо списком. Создали для выбора соответствующие кнопки. Если вы выбрали, например, кнопку "На карте", то эта кнопка будет заполнена, а вторая будет пустая. На самой карте отметили станции кругами соответствующим для сайта цветом, внутри которого изобразили велосипед, что является дополнительным пояснением.
Контакты.
Раздел контакты оформили в виде блоков желто-оранжевого цвета. Блоки, на которые хотели обратить внимание, сделали другой формы и с градиентом, в частности это блок с мессенджерами и блок с адресом. Остальные, менее важные, блоки изображены чуть меньшим размером и без градиента. Это блоки с контактами для обращения с различными вопросами про сервис, для официальным запросов о получении или отправки деловой документации, для партнеров и пресс-служб.
Вопросы и ответы
Раздел, в котором обозначены часто задаваемые вопросы и ответы на них. В разделе для удобства вопросы разделены по категориям: велосипеды, доставка, возврат и обслуживание. Напротив каждого вопроса есть кнопка в виде знака плюс, заключенного в круг. При нажатии на этот плюсик открывается ответ на выбранный вопрос. При повторном нажатии, ответ уходит. Категория, в которой вы находитесь, будет подчеркнута для лучшего ориентирования.
Цветовая палитра
На сайте преобладают черный, желтый и розовый цвета.
Желтый цвет является ярким, стимулирующим цветом, он увеличивает концентрацию, организует, способствует быстрому принятию решений.
Желтый — энергичный, без агрессии, цвет оптимизма, открытости, подвижности и общительности. Настраивает на коммуникабельность. Все ассоциации с желтым цветом у пользователя очень подходят к тематике сайта. На нашем сайте желтым цветом выделено все, на что нужно обратить внимание пользователю.
Розовый цвет
Розовый цвет на сайте представлен в градиенте с желтым. Он ассоциируется с детской беззаботностью и непосредственностью. Розовый необычный, немного чувственный, но очень воздушный, поэтому он ассоциируется с мечтательностью. Он очень сочетается с желтым цветом в выделяющихся элементах на сайте, такое сочетание очень привлекает внимание, особенно на фоне черного цвета.
Черный цвет
Черный цвет в интерфейсе выражает силу, изысканность и элегантность. В нашем интерфейсе яркий контент в тёмном окружении привлекает к себе внимание — это помогает пользователю сфокусироваться на задачах, которые он хочет решить. Также воспринимать текст на тёмном фоне гораздо комфортнее для глаз, что может способствовать большему пребыванию пользователя на сайте. Еще одно преимущество черного цвета в том, что он экономит батарею аккумуляторов с OLED-дисплеями.