Если сказать веб-дизайнеру: «Хотим сайт как у [название известного бренда]», тот, конечно, может собрать все свои дизайнерские скилы и приблизиться к эталону вроде сайта Apple, но в 99% случаев клиенту это просто не нужно. У его бизнеса другие задачи и другая целевая аудитория. А задача веб-дизайнера — сделать так, чтобы сайт был удобным и оставлял приятные впечатления.
Единых критериев оценки «удобства» не существует, но есть несколько приемов, которые помогают удерживать внимание новых посетителей. Как расположены и насколько привычны стандартные блоки, понятны ли формы регистрации, сколько шагов нужно сделать до оформления заказа и не вызывают ли отторжения цветовая схема и иллюстрации — все это повлияет на общее впечатление и определит дальнейшие действия пользователя.
Поговорим о том, как стимулировать посетителя подольше остаться на вкладке с сайтом и совершить целевое действие.
[UX/UI дизайн: Старт] Интерфейс и классификация сайтов
На что обратить внимание при разработке функционала
Пользователя, который впервые оказался на сайте, можно сравнить с посетителем продовольственного супермаркета. Последний знает, что на полках с охлаждением хранится мясо, рыба и полуфабрикаты, кондитерский отдел расположен по соседству с хлебным, а сухарики и чипсы нужно искать рядом со слабоалкогольными напитками. Ваша задача — сделать так, чтобы у посетителя сайта не иссяк запал и он быстро нашел то, зачем пришел: узнал физический адрес, убедился в вашей экспертности, оформил заказ, прочитал полезную статью или новость. И в первую очередь это зависит от того, насколько хорошо вы проработаете функционал. Что важно сделать:
- Разберитесь, чем сайт будет полезен посетителям, — от этого зависит его наполнение. В интернет-магазинах ищут конкретные товары по нормальной цене (чем меньше, тем лучше) и с понятной процедурой покупки. А на сайте автосалона — детальные характеристики автомобилей и форму записи на тест-драйв.
- Нарисуйте портрет или несколько портретов ваших потенциальных покупателей. Выясните, что это за люди, чем они интересуются, где живут, чем руководствуются перед тем, как принять окончательное решение. И заметьте, это не те, кого вы бы хотели видеть клиентами, а самые что ни на есть настоящие клиенты!
Магазин мужской одежды Diplomat разместил на сайте фотографии своих знаменитых клиентов. Маркетологи не только знают целевой портрет покупателя, но и предлагают другим посетителям соотнести себя с ним
- Определитесь, какие бизнес-задачи будет решать сайт. Возможно, вы не справляетесь с потоком заявок по телефону или часто сталкиваетесь с возражениями — отработать их, а заодно доказать компетентность можно именно на страницах сайта.
- Узнайте, как сайт с похожими задачами реализовали конкуренты. Возьмите у них лучшее и постарайтесь не повторить ошибки. Если конкуренты предлагают заполнить длинную форму регистрации, сделайте ее короче и понятнее, чтобы пользователь не совершал лишних действий, — правда, ему просто не хватит жизни, чтобы заполнить все эти невероятно длинные и скучные формы, которые подкидывает интернет.
Компания, которая планирует заняться доставкой цветов, может подсмотреть у этого конкурента, как реализовать выбор подходящего букета прямо на главной странице
- Продумайте структуру будущего сайта так, чтобы она была удобной будущим посетителям и понятной поисковым роботам, а затем для каждой страницы выберите наиболее подходящий набор компонентов.
Когда у нас есть компоненты — строительные блоки — будущего сайта, продумайте их размещение и расположение в пространстве. Это еще не совсем дизайн в чистом виде, а скорее то, что сделает его удобным. Изобретать ничего не нужно: все уже описано в основных принципах UX — user experience, он же «опыт пользователя».
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Что такое UX и почему его нельзя игнорировать
UX — это не про визуальный интерфейс, а про опыт взаимодействия пользователя с сайтом: какой путь он проходит до совершения целевого действия, что для этого предпринимает и какими будут его впечатления от работы с сайтом. Базовые законы UX желательно изучить заранее и применить их на этапе разработки дизайна, чтобы долго и мучительно не вносить правки потом или, в худшем случае, страдать от низкой конверсии. Подробно и доступно об этих законах рассказывает на своем сайте Laws of UX известный дизайнер пользовательских интерфейсов Джон Яблонски (Jon Yablonski).
Закон Фиттса — время для принятия решения и выполнения точных действий на сайте напрямую зависит от размеров цели. Переместить курсор и кликнуть по крупной кнопке проще, чем по маленькой, зажатой между другими элементами интерфейса.
Чем меньше цель, тем сложнее в нее попасть
Закон Хика — чем больше и сложнее варианты выбора, тем больше трудностей испытывают пользователи.
Окружите пользователя десятком разных вариантов — и он запутается быстрее, чем сделает выбор
Закон Якоба — люди проводят много времени на множестве разных сайтов и ожидают, что ваш будет работать так же, как и остальные.
Закон прегнантности — люди воспринимают сложные и неоднозначные элементы так, как им проще.
Чем запутаннее элемент, тем сильнее человеческий мозг будет стараться упростить его
Закон близости — если несколько объектов расположены близко друг к другу, пользователи считают их родственными или объединенными в группу.
Элементы, расположенные близко друг к другу, воспринимаются человеческим мозгом как единое целое
Закон Миллера — пользователь может удержать в кратковременной памяти не более семи элементов. Не стоит перегружать интерфейс лишними, пусть и красивыми, деталями, которые отвлекают внимание от главного. Например, нежелательно скрывать названия пунктов меню за кнопками с общими фразами: вместо кнопки «Подробнее» лучше использовать кнопку «Узнать больше о нашем предложении».
Закон Миллера учитывает ограничение на емкость кратковременной памяти человека
Эффект края (серийного расположения) — пользователи лучше запоминают первые и последние элементы серии.
То, что пользователь увидит первым и последним, запомнится ему лучше, чем промежуточные элементы
Закон Теслера (сохранения сложности) — для любой системы, включая сайт, есть свой минимальный предел сложности, который невозможно сократить.
Лучше потратить дополнительную неделю разработки на то, чтобы упростить интерфейс, чем пользователи сайта потратят тысячи часов на то, чтобы в нем разобраться
Эффект Ресторфф (эффект изоляции) — если среди однотипных объектов попадается один, который сильно от них отличается, то пользователи запомнят его лучше всего.
Элемент, не похожий на остальные, запоминается сильнее всего
Разница между UX, UI и юзабилити
Говорим о UX — подразумеваем юзабилити, или usability («удобство и простоту использования»). Хотя это не тождественные понятия, их часто путают. На самом деле юзабилити — это про дружественный, понятный и естественный в использовании сайт. Общие параметры юзабилити описаны в стандарте ISO 9241-210, а детально на русском узнать об удобном для людей проектировании интерактивных систем (Human Centered Design, HCD) можно здесь.
Этапы проектирования дизайна интерактивной человекоориентированной системы согласно стандарту ISO 9241-210
На популярном ресурсе Techopedia — аналоге «Википедии» для технарей — помимо определения юзабилити можно найти и общие критерии его оценки:
- Адаптивный дизайн: сайт органично выглядит и им одинаково удобно пользоваться на разных устройствах — PC, «маках», смартфонах, планшетах и ноутбуках.
- При его разработке используются общепризнанные практики: оптимального размера и цвета шрифты, логичное расположение блоков, которое позволяет быстро изучить страницу, пробежавшись по ней взглядом по диагонали.
- Информация подается естественным способом: это о том, как владельцы сайта обращаются к посетителям и как с помощью визуальных приемов подталкивают их к использованию функциональных элементов.
В других экспертных источниках встречаются другие критерии оценки юзабилити: доступность сайта, актуальное наполнение, возможность получить обратную связь, интуитивный интерфейс, для понимания которого не нужны дополнительные инструкции, подтверждение реальности компании и стоящих за ней людей. А специалист по юзабилити Якоб Нильсен убеждает, что веб-интерфейс должен быть еще и соблазнительным (seductive interface). Рекомендую прочитать его статью Seductive User Interfaces хотя бы ради того, чтобы увидеть, как можно органично использовать слова «соблазнительный» и «чувственный» применимо к юзабилити.
Пример размещения актуальной информации на главной странице демонстрирует сайт аутлета крупного розничного магазина Zappos: здесь есть информация о пандемии COVID-19, розыгрыше смартфона и летних предложениях.
6PM: главная страница информирует посетителя о самом важном
На сайте HPE, крупнейшего поставщика корпоративных IT-решений, акцент сделан на кнопку обратной связи и использованы названия категорий, которые не нуждаются в пояснениях: «Продукты и решения», «Услуги», «Поддержка» и так далее.
На сайте HPE сложно растеряться с выбором — все пункты понятны и логичны
Кроме юзабилити UX путают с UI (User Interface), который часто называют графическим дизайном. На самом деле UX — это про то, насколько интерфейс полезный в решении задачи пользователя. А UI — насколько он красивый. Получается, что UX базируется на технических принципах, в то время как UI ближе к искусству. Именно UI определяет, насколько интерфейс сайта будет притягательным, вызывающим живой интерес у пользователя.
Чтобы будущий сайт был действительно удобным и понятным, мало ознакомиться с принципами юзабилити, UX и UI. Желательно, чтобы в его разработке участвовали специалисты с соответствующими компетенциями. Например, за UX/UI отвечают UX- и UI-дизайнеры и тестировщики, а для оценки юзабилити в целом могут привлекаться проектировщики, маркетологи, дизайнеры и даже психологи. Конкретно UI-дизайнера можно сравнить с наставником, который помогает пользователю быстро, без лишнего напряжения и стресса разобраться, как работать с сайтом.
Источник: timeweb.com
Для чего необходим интерфейс? Виды и понятие
Слово интерфейс может иметь множество определений, однако основное определение действует в сфере компьютерной техники. Интерфейс здесь означает средство, которое помогает пользователю взаимодействовать с играми, программами или операционным системами. Это средство делает программы узнаваемыми и облегчает работу с ними. Для примера можно взять интерфейс программы Paint. Если человек умеет с ней работать, то ему под силу будет и работа с иными программами, имеющими подобный интерфейс.
Можно объяснить термин другими словами, как совокупность разных средств, с помощью которых человек управляет вычислительной техникой. Основные задачи интерфейса – это ввод и вывод информации. Помимо этого, он помогает управлять программным обеспечением, обмениваться данными и проводить командные операции. Данные операции проводятся с помощью внешних носителей информации.
Как интерфейс можно характеризовать заднюю панель компьютера. Это обусловлено возможностью подключать к нему разные устройства с помощью входов. Панели управления, которые находятся на стиральных машинах или в автомобилях, также являются интерфейсом.
Само слово «интерфейс» позаимствовано в английском языке. Его буквальный перевод означает взаимодействие между лицами, в таком же значении оно и используется. В современных технологиях, интерфейс – это уникальные системные связи, которые обеспечивают передачу информации между двумя объектами или более. Хотя данное понятие чаще всего используется в компьютерных технологиях, присутствует оно и в других областях науки и техники. К примеру, в инженерной психологии интерфейсом называют коммуникации машин с людьми.
Необходимость интерфейсов
Представим, что сложное оборудование составлено из связей, блоков и других различных узлов. Также оборудование связано и с самим пользователем. Последняя связь должна быть выражена в логической форме. Это система, которая предоставляет информацию, а также характеризует сигналы.
Компьютерные интерфейсы логически можно представить себе как системы, созданные на основании математики. То есть, математически, это системы понятий Булевой алгебры. Физически же его можно представить как совокупность чипов, электронных деталей, проводков и других частей, которые между собой обмениваются импульсами тока.
С помощью интерфейса компьютер вообще может работать. Именно он обеспечивает связь процессора и оперативной памяти, устройствами печати, а также с видеокартой. Помимо этого с помощью интерфейса можно работать в Интернете, связываться с иными устройствами и с иными пользователями.
Проще сказать, без данного средства работа вычислительной техники не может быть выполнена. В компьютерных технологиях сегодня применяются разные типы интерфейсов, которые нужны, чтобы работать программисту, необходимы они и для обычных пользователей ПК.
Интерфейс программы
Интерфейсом программы именуют разные части, с использованием которых может производиться управление этой программой. В программе интерфейс выглядит как окошки, кнопочки, которые используются для того, чтобы программа могла совершить действия, которых вы от неё ждете.
Приведем простой пример в использовании компьютерных программ. Для того чтобы посмотреть фильм, необходимо воспользоваться такой программой, как видеоплеер. В программе запускается та строка, которая обозначает фильм, после чего он отображается на экране. Программа для просмотра фильмов также имеет свой интерфейс, который служит для того, чтобы управлять. Так, с помощью кнопок, присутствующих на плеере, можно сделать звук громче или тише, поставить фильм на паузу или выполнить другие необходимые действия.
Графический интерфейс
Графический интерфейс – это пользовательский интерфейс, в котором используются изображения вместо цифр. Изображения в нем заменяют также и буквы, это кнопки или иконки. Яркий пример интерфейса графического типа – это рабочий стол Виндоуз. Работа в этом интерфейсе заключается в том, чтобы обеспечивать работу программы с помощью кликов.
По сравнению с тем, что происходит ввод и вывод через командную строку, графический интерфейс простой и понятный. Не так часто для того, чтобы пользоваться графическим интерфейсом, необходимы специальные знания компьютера. Графический интерфейс часто интуитивно понятен, еще его называют дружелюбным.
Графический интерфейс имеет и свои недостатки, главный из которых – это большой объем памяти, который необходим для того, чтобы в графическом виде представлять себе программу. Но современные программы этот недостаток преодолели, поскольку память современных компьютеров увеличивается с каждым новым выпуском. Но вместе с этим усложняется и сам интерфейс, теперь он занимает больше памяти, но становиться удобнее и эффективнее.
Что касается игр, то в них также существует графический интерфейс, чтобы пользователь мог взаимодействовать с компьютером во время игры. Он обеспечивает также и общение пользователей друг с другом. Почти во всех играх интерфейс сложный, и он позволяет управлять игрой с помощью кнопок и мышкой.
Действия игровых персонажей обеспечиваются действиями пользователя, и способы реализации их стандартны для всех практически игр. Часто пользователю предоставляется возможность поменять настройки интерфейса для того, чтобы ему удобнее было играть. Сейчас появились и новые возможности управления, так, при создании сенсорных экранов, управлять игрой можно с помощью прикосновения пальцев руки.
Виды интерфейса
Помимо того, что интерфейс существует игровой, программный и графический, бывает также интерфейс следующих видов:
Внутренний интерфейс представляет собой методы и свойства, к ним доступ осуществляется посредством иных средств данного объекта. Еще их именуют приватными.
Внешним интерфейсом именуют методы и свойства, которые снаружи доступны пользователям. Такие методы называют публичными. Данные виды можно рассмотреть наглядно, взяв за пример кофеварку. Внутри кофеварки спрятан кипятильник, элемент, который нагревает, тепловой предохранитель и так далее. Все это можно назвать внутренним интерфейсом.
Детали, которые его составляют, обеспечивают работоспособность прибора. Для этого они взаимодействуют друг с другом. К примеру, для работы кофеварки её нагревательный элемент подключен к кипятильнику.
Ко внутреннему интерфейсу кофеварки подобраться тяжело, он закрыт от пользователя пластмассовым корпусом. Детали прибора скрыты, и пользователю доступен только внешний интерфейс. Когда приобретена кофеварка, то пользователю доступен только внешний интерфейс. Знать о внутреннем интерфейсе совсем не обязательно, для пользования прибором необходим только внешний его интерфейс.
Такие же примеры касаются и остальных бытовых приборов, к примеру, стиральная машинка, телевизор и прочее. Существует внутренний интерфейс и у компьютера, он не доступен пользователю, однако при поломке прибора, приходится взаимодействовать именно с ним.
Таким образом, интерфейс характеризуют как средства, с помощью которых удается взаимодействовать с вычислительными машинами, управлять бытовыми приборами и так далее. Он бывает внешним и внутренним. Пользователю доступен только внешний интерфейс приборов и машин.
Отзывы
Роман Ушаков, 27 лет, Ижевск.
С помощью интерфейса мы можем работать на компьютере. С его помощью используются все пользовательские программы. Интерфейсы могут быть графическими или текстовыми, и создавать их могут на разных языках, как и программное обеспечение. Я, к примеру, работаю в фотошопе, и поэтому могу делать свою работу только благодаря интерфейсу программы.
Богдана Сырникова, 35 лет, Москва.
Работать с информационными системами можно только с помощью интерфейса. Функции системы не изменяются, она может работать и с другими объектами. Все программы в компьютере работают практически идентично, и когда пользователь учится обращаться с одной из них, то другую он также сможет освоить с легкостью. К примеру, две программы для обработки фото имеют разный интерфейс, но принцип его работы одинаковый.
Михаил Синицын, 33 года, Екатеринбург.
Наиболее часто интерфейс используют по отношению к компьютерным программам. Это набор методов и средств, которые и помогают взаимодействовать с данными программами пользователю. Всем доступный пример – это контакт, социальная сеть. Мы заходим на свою страничку и можем совершать там разные действия, а помогает нам в этом именно оформление страницы, то есть интерфейс.
Видео
Источник: sekrety-zhizni.ru