Время на прочтение
4 мин
Количество просмотров 8.8K
Все мы учимся на ошибках, и это правило работает и у веб-дизайнеров тоже. В этой статье мы расскажем вам, какие ошибки многие из них допускают при создании дизайна пользовательских интерфейсов.
В творческой работе веб-дизайнера бывает непросто следовать каким-то общепринятым правилам. На самом деле, гораздо удобнее знать, «как не надо делать», и ориентироваться на это. По этой причине мы решили составить список грубых ошибок в дизайне интерфейсов. Хотите знать, какие серьезные оплошности допускают даже опытные дизайнеры? Тогда добро пожаловать в наш хит-парад.
№1 Серый текст на цветном фоне
Каждый из нас хоть когда-нибудь открывал веб-приложения или сайты на улице, под прямыми солнечными лучами. И в этом нет ничего страшного, если контраст между цветом фона и шрифта позволяет различать буквы и цифры. Но почему-то именно об этом нюансе многие веб-дизайнеры забывают. В результате владельцам мобильных устройств приходится прикрывать экран рукой, отходить в тень или придумывать что-то еще, чтобы выйти из положения. Хорошо подумайте, прежде чем сочетать серый текст с однотонным фоном.
Примеры взяты с ресурса «Refactoring UI»
№2 Целиком заполненный экран
Иногда «мало» не значит «плохо». Бывает, что на какой-то странице объем контента минимален, и обычно это не беда – главное, чтобы он был равномерно распределен. Но некоторые веб-дизайнеры относятся к пустому пространству с опаской и пытаются забить его, укрупняя шрифт и растягивая баннеры и изображения. Часто это доходит до смешного. Не следуйте их примеру – просто оставьте свободное место, если контента не слишком много.
№3 Пользовательский контент
Разрешать пользователям самостоятельно загружать графические файлы, которые будут отображаться на страницах в публичном доступе – не всегда хорошая идея. На это есть много причин: от низкого разрешения подобных картинок до контента, не отвечающего правилам приличия. Соответственно, прежде чем предоставлять целевой аудитории такую возможность, позаботьтесь о том, чтобы внедрить алгоритмы модерации.
№4 Перегруженный стиль
О переизбытке элементов на странице сказано уже многое. Здесь мы только еще раз подчеркнем необходимость следовать принципу «меньше значит больше», в первую очередь, если речь идет об экспериментальных дизайнах, которые вы сами создавали с нуля. Не забывайте, что дело здесь не только в привлекательности – изобилие элементов может сбить пользователя с толку.
№5 Неудачные шрифты
Теперь поговорим об экспериментальных шрифтах, таких, какие веб-дизайнеры используют, чтобы показать, что их создатели – люди творческие. Во-первых, такие шрифты часто «плывут» на устройствах нестандартных размеров. Во-вторых, если шрифт в основе своей не уникален, есть риск, что выйдет жалкое подобие чужого дизайна, и все опознают автора по шрифту. Поэтому когда речь заходит о выборе шрифта, зачастую лучшим выбором оказывается что-нибудь нейтральное.
№6 Не вдохновляющие призывы к действию
Еще одна проблема проистекает из слепого стремления веб-дизайнеров максимально ужать тексты, которые они располагают на кнопках и других небольших по размеру элементах интерфейса. В итоге, призывы к действию звучат как-то неуверенно и тексты на элементах не вызывают никакого желания с ними взаимодействовать. По этой причине иногда стоит выделить побольше пространства и позволить контент-менеджерам развернуться с призывами к действиям.
№7 Отсутствие социальных подкреплений
Многие из нас в процессе выбора продукта выходили на какие-нибудь клинические исследования или отзывы покупателей, которые выступали в роли социального подкрепления. Не пренебрегайте подобными вещами, когда делаете сайт, рассчитанный на то, чтобы продать. Это придаст потенциальным покупателям уверенности в том, что они делают правильный выбор.
№8 Переизбыток текста
Вебсайты, до краев заполненные текстовым контентом – один из негласных трендов поздних девяностых, когда Интернет был еще в младенческом возрасте. Сейчас на смену этой модели пришла инфографика, благодаря своей способности объяснить большинство сложных концептов понятным и доступным языком, не создавая лишних препятствий для пользователя. Поэтому лучше обратиться к дизайнеру за информативными изображениями для сайта, чем вынуждать пользователя читать много текста.
№9 Слишком сложная навигация
Запутанная навигация – проблема, особенно остро стоящая для азиатских сайтов. Если честно, мы не понимаем, почему их создателям так нравится сбивать пользователей с толку. Мы стоим на том, что функциональность должна быть надлежащим образом структурирована – так, чтобы даже те, кто не знает языка, могли разобраться, что нужно делать, не прибегая к помощи Google Translate.
№10 Неверно заданные интервалы и отступы
И наконец, самые серьезные проблемы начинаются тогда, когда дизайнеры не задумываются перед тем, как задавать отступы и интервалы между элементами дизайна. В результате даже адаптивные и отзывчивые интерфейсы на практике оказываются непригодными к использованию – текст на устройствах небольшого формата становится таким микроскопическим, что ничего нельзя разобрать без приближения.
В завершение
Конечно, мы перечислили далеко не все типичные ошибки, которые допускают дизайнеры при работе над интерфейсами. Но мы надеемся, что этот список убережет вас хотя бы от тех, которые больше всего действуют пользователям на нервы. Так что вдохновляйтесь на достижение новых высот в веб-дизайне!
Большинство интернет-пользователей в России пользуются маркетплейсами и онлайн-магазинами для совершения ежедневных покупок. И часто бывает так, что попадая на ресурс и испытывая какую-то заминку или сложность при изучении сайта, потенциальный покупатель покидает интернет-магазин, не успев оформить заказ. Определенный процент отказа посетителей при посещении сайта присутствует всегда. Но если объем трафика на ресурсе достаточно высокий, тогда ошибки в юзабилити интернет-магазина могут привести к значительным убыткам для предпринимателя. Важно вовремя понять, какие сложности испытывают покупатели на сайте и как это можно исправить, чтобы пользовательский интерфейс не стал причиной низкой конверсии ресурса.
1. Сложная навигация
Это ошибка считается самой распространенной среди владельцев бизнесов, у которых есть сайты. Иногда, желая выделиться среди конкурентов и сделать нечто оригинальное, предприниматель игнорирует базовые понятия удобства сайта и правила расположения главных элементов. Хоть понятие удобства в интернет-магазине и является субъективным, все же не стоит усложнять жизнь покупателям и дезориентировать их.
В интернет-магазине должны присутствовать основные блоки, они располагаются вверху. Справа в верхней строчке принято размещать активную кнопку с контактами (телефон, адрес магазина, электронная почта). Логотип фирмы лучше поместить в левый верхний угол, а меню с основными разделами — слева сбоку. Также в шапке сайта можно указать важную информацию о стоимости услуг, добавить ссылку на отзывы или кейсы. Такое отображение элементов считается общепринятым и инстинктивно понятным для большинства пользователей.
Чтобы человеку не пришлось каждый раз думать о том, куда нужно нажать и гадать, в какой же раздел он попадет, стоит заранее продумывать структуру сайта и навигацию. У любого ресурса должна быть четкая иерархия, а вложенность страниц не превышать 2-3. Но если оказалось так, что этот момент требует доработки, следует на некоторое время остановить продажи, чтобы программист мог спокойно исправить систему навигации.
2. Обилие текста и недостаток визуала
Избыток информации в виде длинных текстовых описаний может оттолкнуть любого, даже самого непритязательного клиента. Мало кто захочет изучать преимущества магазина или характеристики товара, если данные представлены в виде сплошного длинного текста, особенно если использован мелкий шрифт. При оформлении любого блока на сайте следует предусмотреть возможность использования изображений. Текст с картинками людям воспринимать проще, чем без них. Но не стоит вставлять первые попавшиеся картинки. Лучше нанять фотографа и разместить на сайте качественные, уникальные изображения, которые явно демонстрируют преимущества бренда.
Если сократить информацию не получается и текст получается довольно объемным, следует принять во внимание правила типографики для интернет-ресурсов. Вот как можно преобразить нечитаемый «кирпич» текста и сделать его более легким для восприятия:
- Использовать один шрифт на сайте. В редких случаях допускается сочетание шрифтов, когда для оформления применяют не 1, а 2-3 шрифта.
- Не увлекаться шрифтами с засечками. Если в заголовке есть засечки, то в самом тексте их быть не должно.
- Разбивать текст на смысловые абзацы.
- Использовать заголовки и подзаголовки для структурирования информации и облегчения восприятия.По
- ещать текст в плашку для создания акцента.
- Разбавлять текст фотографиями и видео.
3. Отсутствие хлебных крошек
Перемещаясь по сайту, пользователи могут потеряться среди разделов. Поэтому, чтобы клиентам было проще ориентироваться в интернет-магазине, следует использовать навигационную цепочку или так называемые хлебные крошки. Наличие навигационной цепочки как на десктопе, так и в мобильной версии приложения, позволяет покупателю легко возвращаться на предыдущий этап поиска, не вводя каждый раз запрос по-новому. Также хлебные крошки удобны тем, что клиент всегда может понять, к какому из разделов относится конкретная вещь или другое изделие и использовать эти знания в дальнейшем при поиске необходимых товаров.
4. Сложная форма регистрации
Когда пользователь попадает на сайт и собирается пройти регистрацию, он ожидает, что эта процедура пройдет легко и быстро. Поэтому не стоит добавлять слишком много полей в регистрационную форму, чтобы не оттолкнуть потенциальных покупателей. Пусть пользователь заполнит только самые необходимые поля для регистрации, указав свое имя и фамилию и контактные данные. А остальную информацию он сможет указать позже, на сайте в личном кабинете. Кстати, за заполнение подробной анкеты интернет-магазины обычно начисляют клиенту бонус, который он позже сможет потратить на покупки.
5. Хаотическое отображение главного экрана
Как показывают маркетинговые исследования, информацию на главном экране сайта изучает лишь 5-10% посетителей. И тем не менее, это не означает, что первый экран ресурса можно оформить как захочется. Необязательно тратить деньги на создание уникального дизайнерского баннера для интернет-магазина. Важно понять, что главный экран должен быть информативным, а визуальный шум в виде хаотично вставленных баннеров и мини-блоков только усугубляет ситуацию. Даже если те 10% покупателей захотят получить больше информации о бренде, изучая первый экран, который не отражает суть работы компании, скорее всего, они покинут страницу, так и не совершив заказ.
Избыточная информация лишь вызывает затруднения у пользователей и никак не помогает сконцентрироваться. Обилие различных блоков и элементов на первом экране может отпугнуть потенциальных клиентов. Чтобы этого не произошло, следует разработать модульную сетку для сайта, в которой будут располагаться шаблоны будущих элементов и дизайнов. Благодаря модульной сетке интернет-магазин обретет структуру и единообразие, что поможет клиентам проще воспринимать контент. Если случилось так, что главный экран выглядит «пустым», можно заполнить свободное пространство оффером или уникальным торговым предложением.
6. Отсутствие оффера и УТП
Иногда при переходе на ресурс, пользователь не понимает, что продают на сайте и чем эта веб-страница может ему помочь. Если так случилось, это означает, что у компании нет оффера и скорее всего, отсутствует и УТП. Попадая в такой интернет-магазин, где нет ни слова о том, чем занимается фирма, клиент очень быстро понимает, что ему здесь делать нечего и ищет другой ресурс. Отсутствие оффера — это стратегическая ошибка, которая может обойтись очень и очень дорого. В каждой, даже узкой сфере есть десятки и сотни конкурентов, которые не спят и следят за своими соперниками. Сейчас покупатели стали более придирчивы, они избалованы возможностью выбора. Поэтому удерживать внимание посетителей нужно грамотно.
При формировании оффера не стоит использовать банальные и широко распространенные фразы, которые не отражают сути бизнеса. Например, оффер в стиле «индивидуальный подход, опытные сотрудники, работаем для вас» никак не поможет привлечь клиентов и не заинтересует их. Торговое предложение должно подчеркивать ценность продукта и раскрывать выгоды для покупателей, отражать информацию о выгодных условиях сделки.
Чтоб составить продающий оффер или уникальное торговое предложение, не обойтись без четкого знания своей целевой аудитории. Отталкиваясь от потребностей, болей и предпочтений потенциальных клиентов, и следует разрабатывать такое предложение, которое будет отличаться от предложений конкурентов и четко отвечать на ряд вопросов:
- что продают на этом сайте;
- на кого рассчитано это торговое предложение;
- почему данное предложение должно заинтересовать покупателя;
- чем это предложение отличается от других конкурентных предложений.
Важно также помнить о том, что оффер на сайте должен соответствовать тексту в рекламном объявлении. Часто предприниматели и маркетологи, пытаясь привлечь как можно больше посетителей на сайт с помощью контекстной и таргетированной рекламы, забывают о том, что информация в объявлении и на сайте отличается. Например, если пользователь заинтересовался рекламой, где ему обещают посудомоечную машину со скидкой за 15 тысяч рублей, а на сайте такого товара нет и о скидках не говорится ни слова, покупатель сразу же покинет страницу и потеряет доверие к бренду.
7. Всплывающие окна
Практически на каждом сайте можно встретить различные поп-апы и всплывающие окна, которые рекламируют какой-то товар или предлагают онлайн-консультацию со специалистом. Если поп-ап появляется слишком часто или его трудно закрыть, или всплывающих окон на ресурсе несколько, это может серьезно сказаться на посещаемости интернет-магазина. Сам по себе поп-ап не является плохим инструментом для продвижения. Но стоит позаботиться о своих клиентах и настроить появление окон таким образом, чтобы пользователь в любой момент смог его закрыть. То есть, у поп-апа обязательно должен быть виден крестик в углу, а его появление лучше настроить так, чтобы окно всплывало через 30-60 секунд после перехода пользователя на сайт. А можно встроить попа-ап так, чтобы он был абсолютно ненавязчивым.
8. Незаполненные разделы
Иногда случается так, что у предпринимателя или программиста не хватает времени на заполнение всех разделов сайта. Такое может случится и при отсутствии подходящего контента. Но лучше так не поступать. Дело в том, что пользователь, когда видит пустые страницы в интернет-магазине, испытывает ощущение того, что ресурс еще сырой, недоделанный, и скорее всего, доверять такому бренду не стоит. Поэтому нужно позаботиться о том, чтобы абсолютно все разделы сайта содержали актуальную информацию и были оформлены подобающе.
9. Контент из фотостоков
Иногда предприниматель, пытаясь сэкономить деньги и время на создании качественного контента, использует фотографии с открытых источников. Когда-то это было допустимым и почти никак не влияло на конверсию интернет-магазина. Но теперь, когда фото и видео контент заполонил интернет-пространство и социальные сети, стало труднее соперничать с конкурентами. Теперь выигрывает тот, кто сумел завладеть вниманием покупателей и привлечь клиентов на сайт благодаря определенным преимуществам, которые тоже можно выразить с помощью изображения.
Использовать стоковые изображения нельзя ни в коем случае, иначе предприниматель может забыть о продажах. Демонстрировать продукты и услуги покупателям нужно только через собственный контент. Для этого не стоит пытаться сэкономить, лучше нанять профессионального фотографа, пригласить опытных моделей и арендовать подходящую студию. Результат не заставит себя долго ждать.
Когда люди выбирают, на каком сайте совершить покупку, они долго изучают отзывы, кейсы. портфолио. Особенно, если будущая покупка относится к категории дорогостоящих. Без социального доказательства сегодня трудно продавать даже одежду. Ведь без наличия реальных отзывов мало кто захочет оформлять заказ, да еще и по предоплате. Поэтому как только появятся первые положительные отзывы, сразу нужно оформлять специальный раздел и публиковать там обратную связь.
Часто клиенты не особо охотно оставляют отзывы. Поэтому можно предложить им какой-то бонус: скидку или бесплатную доставку на следующий заказ при условии оставления обратной связи. Если бизнесмен предоставляет какие-то услуги, обязательно нужно оформлять кейсы, где четко обозначать ситуацию клиента до и после того как он обратился за помощью. Следует прописывать исходную ситуацию, проблемы, цели и задачи, способы, которые помогли решить проблему.
В отдельном разделе, посвященному компании, рекомендуется публиковать новости фирмы и размещать ссылки на другие источники, в которых упоминается бренд. Также необходимо демонстрировать экспертность, если это бизнес по оказанию услуг. Демонстрация социального доказательства хорошо работает для таких сфер, как частная медицина, услуги юристов, адвокатов, нотариусов, психологов, мастеров красоты.
Коротко о главном
Исправить ошибки в пользовательском интерфейсе на сайте не так уж сложно, но все же стоит постараться и вовсе их не допускать. Такие мелочи, как неудобная навигация, отсутствие хлебных крошек или стоковые изображения, на первый взгляд, не представляют серьезной опасности для бизнеса. Но на самом деле, это может нанести удар репутации бренда. Если определенный процент покупателей при посещении ресурса наткнется на ряд таких недоработок и поймет, что совершать покупки здесь неудобно, то предприниматель окончательно потеряет эту аудиторию как потенциальных клиентов. Но даже если сайт отличается высоким качеством контента и способен составить достойную конкуренцию соперникам, не стоит расценивать это как данность. В условиях современной жесткой конкуренции следует всегда держать руку на пульсе и следить за поведением посетителей на ресурсе и за трендами в пользовательском интерфейсе.
Возможно вам также будет интересно:
Алексей Копылов
Плохой дизайн
и к чему он приводит
В первой статье мы рассмотрели понятие дизайна, узнали, что такое аффорданс, и поговорили о трех важнейших составляющих хорошего пользовательского интерфейса.
В этой части статьи мы рассмотрим проблемы, которые несет плохой дизайн и кратко пробежимся по истории пользовательских интерфейсов, чтобы показать как связана задача, стоящая перед дизайнером, и выбор способа взаимодействия пользователя с программой.
Краткая история пользовательских интерфейсов
Способы взаимодействия человека с техникой с течением времени претерпели серьезные изменения, что наглядно проиллюстрировано на рисунке ниже.
Изменения интерфейсов с течением времени
На раннем этапе развития компьютерных пользовательских интерфейсов использовались перфокарты и другие примитивные способы ввода информации. В какой то момент популярность набрал интерфейс командной строки. Он и сейчас уместен в определённых задачах, например, в задачах системного администрирования.
В 1968 году из недр лаборатории XEROX PARC вышел революционный на тот момент так называемый «оконный интерфейс». Вы можете оценить это событие, посмотрев видео «Прародитель всех демонстраций», в котором Дуг Эрнгельбарт представил следующие совершенно новые концепции: оконный интерфейс, мышь, гипертекст, телеконференции, текстовый редактор (текст в котором можно было редактировать группой пользователей!). Далее компании Apple и Microsoft скопировали основные идеи XEROX PARC (санкционировано и не совсем), усовершенствовали их и создали собственные коммерческие операционные оконные системы.
Относительно недавно по историческим меркам появились сенсорные интерфейсы, которые стали по-настоящему популярны после появления Apple iPhone.
Прямо сейчас активно развиваются голосовые интерфейсы, а 2021 год стал прорывным для VR/XR. Не за горами развитие нейроинтерфейсов, то есть прямое подсоединение машины к мозгу с помощью проводов или даже без них.
Важно, что несмотря на то, что регулярно появляются новые способы взаимодействия, опытные дизайнеры знают, как использовать всё историческое наследие, и, в зависимости от задач и контекста пользователей, выбирают тот или иной тип интерфейса.
Например, при проектировании дизайна для системы хранения данных мы с коллегой добавили интерфейс командной строки. Опытные системные администраторы вместо использования мышки и окон могут исполнять чрезвычайно эффективные текстовые команды. Совсем другой пример использования вроде как устаревшего интерфейса: QR-коды, которые являются прямым аналогом древних перфокарт.
Я привёл эти примеры, чтобы обратить ваше внимание, что стоит использовать весь «репертуар» видов взаимодействия, если это уместно в вашем проекте.
Давайте посмотрим на очевидно плохие интерфейсы и последствия их использования.
1. Плохие интерфейсы сбивают с толку.
Посмотрите на сайт Федерации настольного тенниса Республики Башкортостан.
Сайт Федерации настольного тенниса Республики Башкортостан
Что не так в дизайне этого сайта?
Каждая текстовая строка, каждый элемент дизайна «кричит» о себе, как на восточном базаре: «Прочитай меня! Нет, прочитай МЕНЯ!» Посетителю сайта непросто сфокусировать внимание на чём-то одном и начать читать, поскольку внимание автоматически переключается на соседние «кричащие» и «вопящие» строки и заголовки.
На мой взгляд, сайт разработан человеком, не имеющим в достаточной мере представления о том, что такое дизайн, о визуальном восприятии информации при её чтении.
Поскольку, как я думаю, другой такой Федерации настольного тенниса Республики Башкортостан нет, то все, кто имеет к нему отношение, вынуждены пользоваться этим сайтом. Из этого логично заключить, что, когда нет конкуренции, дизайн не так важен: можно, в принципе, использовать любой дизайн, люди в любом случае будут пользоваться им ради информации. Но, как только появляется конкуренция, дизайн становится чрезвычайно важным. В современных продуктах технологии и интерфейс — это самые главные конкурентные преимущества при прочих равных (при одинаковой цене, например).
Если приглядеться к сайту Федерации настольного тенниса Республики Башкортостан, то можно заметить, что здесь явно нарушена визуальная иерархия, то есть, напрочь отсутствует сознательное управление вниманием пользователей.
Если вы возьмёте классическую бумажную газету, то практически всегда на первом развороте увидите некую большую фотографию, крупный текст. Далее вы заметите текст и изображения меньшего размера, потом ещё меньшего, и наконец доберётесь до текста с минимальным размером шрифта. Таким образом, с помощью размера шрифта и размера вставок в газеты, ваш взгляд специально направляют так, чтобы вы читали газету в определённом порядке. Получается, создатели газет фактически управляют вашим вниманием. Продуманная визуальная иерархия — мощное средство улучшения интерфейса.
Давайте рассмотрим ещё один пример плохого интерфейса на рисунке ниже.
Дизайн интерфейса «по просьбам пользователей»
Это наглядный пример создания пользовательского интерфейса «по запросам пользователей». То есть здесь представлен случай, когда пользователи требуют новые функции, а разработчик, не оценивая каждую из входящих просьб критически, чисто методически дорабатывает интерфейс. По этой причине и получаются подобные «монстры» программостроения.
На своих курсах я часто провожу аналогию таких запросов от пользователей с детьми, которые просят у родителей конфеты. Мы все понимаем, что хороший родитель не будет кормить своих детей одними конфетами только потому, что те просят их постоянно. Конечно нет! У родителей, как правило, есть принцип, что для получения конфеты, необходимо сначала съесть обычную еду.
Поэтому, когда пользователи просят вас внедрить что-то новое в вашу программу, нельзя воспринимать это как прямой запрос, который необходимо обязательно реализовать Нет. Каждую такую просьбу нужно воспринимать как нечто, что требует осмысления. Это как врачи жалобы пациентов воспринимают как симптом, а не как руководство к действию. Если пациент на приёме у врача сообщает ему, что у него болит рука, это вовсе не означает, что врач тут же начнет лечить ему руку. Ответственный врач проведёт исследования и только тогда поставит диагноз, и на основании него пропишет лечение.
В дизайне то же самое. Любую просьбу пользователя необходимо воспринимать критически, соизмерять с другими просьбами пользователей, структурировать все просьбы, пытаться понять, почему люди это просят, проводить интервью, глубинные интервью или анкетирование и так далее, чтобы глубже разобраться с причинами появления таких запросов.
2. Плохие интерфейсы бесят пользователей.
В качестве примера приведу один из первых мемов в интернете, когда офисный сотрудник при работе с ПК (очевидно, не разобравшись с интерфейсом какой-то из программ) сначала ударяет ПК по стенке ЭЛТ-монитора, потом нещадно совершает несколько ударов кулаком по клавиатуре и в завершении своего приступа ярости сметает со стола монитор ударом по нему клавиатурой. Я видел, как подобные вспышки ярости возникали у пользователей из-за того, что интерфейс не позволял выполнить их задачу.
3. Плохие интерфейсы не используются так, как было задумано.
Для наглядной иллюстрации этого варианта плохого интерфейса приведу пример с горкой для детей, изображённой на фото. Посмотрите, эти дети, чтобы кататься, вместо горки используют наклонную поверхность площадки, на которой она поставлена.
Пример интерфейса, когда объект не используется по первоначальному его назначению
Такие ситуации встречаются достаточно часто. Это происходит, когда дизайнер перед созданием интерфейса недостаточно изучил, что людям нужно на самом деле и как они этим продуктом будут пользоваться.
Если бы эту горку протестировали, то, вероятно, конструкторы обнаружили бы, что есть некая проблема, и горку ввели бы в эксплуатацию только после успешного прохождения тестирования. Сейчас же эта горка тиражирована, стоит во множестве мест, а по прямому назначению её никто не использует. Печально.
4. Плохие интерфейсы убивают.
Это не шутки. В конце 2001 года восемь американских солдат погибло из-за ошибки в проектировании GPS-наводчика тактических ракет Precision Lightweight GPS Receiver (PLGR, или «Plugger»).
GPS наводчик тактических ракет PLGR
Что именно произошло? При отправлении координат цели на спутник случилось событие, которое не было просчитано создателями устройства: у наводчика в устройстве сели батареи. После замены батарей координаты на устройстве сбросились до значений по умолчанию, то есть, установились по координатам самого наводчика — места, где как раз и находился этот взвод. Спутник передал координаты в командный центр, откуда была произведена наводка ракеты и она попала точно в цель, убив людей.
Кто виноват в том, что восемь человек не вернулось домой? Кто не продумал такой вариант развития событий?
Возможно, дизайнеру и не ставили задачу продумать все сценарии использования устройства. Возможно, ему не пришло в голову, что будет происходить, если у наводчика сели батареи.
Дизайнерам достаточно часто дают узкую задачу. Например, просят спроектировать удобные кнопки на устройстве и дисплей с заданными параметрами к отображаемой на нём информации.
Могу предположить, что проектирование «Plugger» выглядело следующим образом. На проекте был отдельный промышленный дизайнер, который продумывал форму, чтобы устройство было удобно для ношения, имело возможность крепления к поясу и так далее. Однако, не было такого человека, который продумывал бы «сквозные» сценарии, то есть, которые касаются и формы устройства и пользовательского (программного) интерфейса. Такие, как в том случае, когда у наводчика PLGR сели батареи.
Вроде бы нет виновного, но, при этом люди погибли. Часто такие трагедии сваливают на так называемый «человеческий фактор». Вы наверняка слышали это выражение в связи с авиакатастрофами. В большинстве аварий с самолётами оказывается, что какой-то интерфейс взаимодействия с лётчиком сработал плохо, сбил пилота с толку — пилот интерпретировал эту информацию неверно, принял ошибочное решение и выполнил неправильные действия, которые привели к катастрофе.
Таким образом, плохие интерфейсы раздражают, сбивают с толку, иногда являются причиной человеческих смертей, а также приводят к тому, что предметы используются не по своему прямому назначению.
Чтобы учитывать это при дизайне интерфейса, как правило, одних только теоретических знаний недостаточно. Приходите на курс Дизайн интерфейсов для недизайнеров, чтобы попрактиковаться в разработке хороших интерфейсов.
Алексей Копылов
Эксперт в сервисном дизайне
- Более 20 лет опыта в проектировании пользовательских интерфейсов
- Сооснователь компании UIDesign Group
- Руководил дизайном интерфейсов в компаниях Flexis, Kaspersky Lab, Wargaming
- Консультирует на темы картирования услуг, проектирования и анализа пользовательских интерфейсов (UX, CX)
- Автор статей и тренингов по CJM
Подписаться на новые статьи
Здорово, когда сайты или приложения интуитивно понятны. Успешный пользовательский опыт обеспечивает компаниям хорошую прибыль. Но иногда даже опытные дизайнеры допускают ошибки, которые заставляют людей уходить с сайта, сразу же закрывать приложения и обращаться к конкурентам. Поговорили с Кристиной Мартыновской , преподавателем Contented на курсе Профессия «UX/UI-дизайнер PRO» о распространенных проблемах в интерфейсе.
Содержание
- Затянутое знакомство с продуктом
- Использование непривычных для пользователя иконок и других условных обозначений
- Слишком большой объем текста
- Недостаточное количество текста для понимания
- Проблемы с читаемостью текста
- Некорректные тексты кнопок
- Маленькие кнопки и другие кликабельные элементы
- Яркие цвета, которые отвлекают внимание
- Отсутствие контраста
- Неинклюзивный интерфейс
Затянутое знакомство с продуктом
Когда вы устанавливаете новое приложение, то сначала видите несколько экранов с инструкциями: как загрузить фото, посмотреть каталог или добавить что-то в избранное. Эта часть приложения называется «онбординг». Вот так выглядит хороший онбординг в приложении Vimeo, который совместили с регистрацией. Всего 3 экрана с лаконичным и понятным текстом:
Проблема в том, что, если онбординг слишком длинный, человек читает первую и вторую страницу, а дальше начинает фрустрировать и нажимает «Пропустить». Тогда он не узнает о возможностях продукта. Иногда онбординг невозможно пропустить, и это ухудшает пользовательский опыт. Человек так и не начинает пользоваться приложением.
Поэтому нужно делать знакомство с продуктом коротким и информативным. Стандартная продолжительность ― 3 экрана:
Использование непривычных для пользователя иконок и других условных обозначений
Особенно это любят делать начинающие дизайнеры, которые не знакомы с гайдлайном — документом с набором правил по использованию цветов, шрифтов, иконок и других элементов. Если мы говорим про мобильные интерфейсы, есть два больших гайдлайна, в которых в числе прочего прописаны требования к иконкам:
- Apple Human Interface Guidelines для iOS;
- Google Material Design System для Android.
У Google большой набор иконок, которые знакомы всем пользователям Android. А таких людей большинство, потому что, по статистике, доля рынка Android в мире составляет 72%.
Например, привычная всем иконка для обозначения ресторанов — это тарелка, вилка, ложка, а для баров — бокал. Но сервис Aviasales использует для этих категорий непривычную иконку — звонок для вызова официанта.
С веб-интерфейсом проще, так как места на экране больше, чем на телефоне. Иконки стали нужны с появлением мобильных устройств, чтобы сэкономить место. По сути, иконка — это метафора, которая служит для условного обозначения. Но в веб-версии можно использовать текстовую навигацию:
У иконок в вебе другие функции: они притягивают внимание пользователя к объекту, например к важному тексту, а иконки в лендингах часто похожи на иллюстрации, и под ними или рядом размещают текст:
Слишком большой объем текста
Это частая проблема, если в компании нет UX-писателя или копирайтера. Ошибка встречается и в мобильных, и в десктопных интерфейсах.
Бывает, что информации слишком много и она плохо сверстана: нет заголовков, подзаголовков и буллитов для маркировки основных пунктов. Такой текст очень тяжело читать, человек отвлекается и не вникает в суть написанного.
F-паттерны — это самая распространенная траектория, по которой пользователи просматривают контент. Такие паттерны описывают поведение пользователей: человек читает первую строчку, в середине и дальше вниз пробегается по заглавным буквам, больше ничего не читает. Знание об F-паттерне позволяет создавать дизайн с хорошей визуальной иерархией: так, чтобы люди читали и в нужных местах находили самую важную информацию. Это отличное решение для сайтов, где много текста: блогов с лонгридами, новостных порталов. Поэтому текст обязательно надо красиво верстать и форматировать.
Недостаточное количество текста для понимания
Недостаточное количество текста для понимания — это тоже большая проблема. Например, в приложении сети кофеен «Кофе Культ» на странице «О компании» совершенно нет информации о компании, зато есть кнопки «Позвонить» и «Написать». И несмотря на то что это важные опции, они не соответствуют ожиданиям пользователя: человек собирается прочитать информацию о компании, когда переходит на страницу.
Еще одна неприятная ситуация — неинформативные сообщения об ошибках. Часто бывает так, что на ошибке написано просто «Ошибка такая-то», а затем предлагается нажать «ОК» или крестик. Что пользователю делать с этой информацией — непонятно.
Хорошее сообщение об ошибке должно описывать, какая ошибка произошла и что делать дальше.
Проблемы с читаемостью текста
Основные ошибки, которые делают текст нечитаемым, — это:
- большое количество шрифтов и стилей типографики. Правило хорошего тона в мобильных интерфейсах: один шрифт Roboto для Android. А дальше можно менять его начертание: жирность, величину. Для веба допустимо использование 2 шрифтов, больше не нужно;
- слишком крупный и слишком мелкий заголовок. Слишком крупный заголовок — это не проблема. Иногда бывает, что дизайн довольно специфичный и большие крупные заголовки хороши. Они броские, привлекают внимание. Это отлично подходит для некоторых стилей и авторских решений. Мелкие заголовки уже хуже, потому что могут быть похожи на обычный текст и читателю сложно понять, что это заголовок;
- слишком слипшийся текст или большой интерлиньяж. Здесь тоже все зависит от стиля. Иногда получается так, что в дизайне слипшиеся или широкие интервалы между текстом нормально смотрятся, потому что там информация не такая важная и нужна больше для красоты. Конечно, если мы говорим про нормальные тексты, когда их обязательно нужно прочитать, следует поработать над форматированием.
Верстка для дизайнера — это такая же база, как композиция и колористика. Но иногда проблема возникает на стадии разработки, когда программист создает страницу по макету дизайнера и по какой-то причине отступает от него. Здесь дизайнер должен проводить авторский надзор и смотреть, что сделал разработчик.
Некорректные тексты кнопок
Иногда тексты на кнопках вводят пользователя в заблуждение, так как при прочтении непонятно, к чему приведет нажатие на кнопку. Некорректны такие сочетания, как
- Отмена — Отменить;
- Нет — Отмена.
ОК — Отменить — это нормальные кнопки: одно действие одобряет, другое отрицает. В английском варианте будет OK — Cancel. Для одобрения или отрицания также можно использовать знакомые и интуитивно понятные пользователям значки на кнопках вместо текста:
Маленькие кнопки и другие кликабельные элементы
В мобильном интерфейсе есть понятие «область нажатия». У кнопки она должна быть довольно большая, потому что мы ориентируемся на большой палец среднестатистического человека. Также стоит учитывать, что у мужчин пальцы больше и им сложнее попасть по маленьким иконкам и элементам.
Для веба это не так важно, потому что точность попадания курсором выше, чем пальцем, но тоже не стоит делать совсем мелкие элементы, потому что это усложняет восприятие. Пользователь смотрит и не считывает нужную информацию, для него мелкие элементы похожи на визуальный шум.
Яркие цвета, которые отвлекают внимание
И в мобильных, и в десктопных интерфейсах может быть призыв к действию, его называют Call to Action (CTA). Обычно это кнопка, отвечающая за важное действие, которое поведет человека дальше по пути пользования продуктом.
Бывает, что на экране 3 или 4 таких ярких кнопки, и какая из них важнее — непонятно. Плюс огромный заголовок, фотография, ссылки — все это запутывает пользователя.
Большое количество кнопок и информации перебивает друг друга и запутывает читателя. Лаконичность влияет на скорость взаимодействия пользователя с интерфейсом. Когда между различными элементами выстроена иерархия, нет противоречий, человеку интуитивно понятно, где и что искать, — все это улучшает пользовательский опыт.
Отсутствие контраста
На желтой кнопке не стоит делать текст горчичного цвета. Красная кнопка и розовый текст — тоже неудачное сочетание. При разработке концепции эти сочетания могут хорошо смотреться в высоком разрешении на мониторе у дизайнера, но у пользователя может быть бюджетный Android с плохой цветопередачей, и текст совсем не будет читаться.
В Figma есть плагин Contrast, который проверяет контрастность цветов во время работы. Нужно выбрать слой, и плагин сравнит его с цветом под выделением, а затем покажет контрастность вместе с пройденными и непройденными уровнями из «Руководства по доступности веб-контента (WCAG)».
Слабая контрастность может пригодиться, например, в иллюстрациях или для фоновых элементов, которые не должны перетягивать внимание. Все остальное должно быть контрастным.
Неинклюзивный интерфейс
Инклюзивный интерфейс — такой, который учитывает потребности всех людей без исключения.
Например, на сайте отсутствует Alt-текст — текстовое описание картинки. Тогда человек с плохим зрением не сможет включить голосового помощника, который прочитает, что изображено на картинке. Alt-текст нужно прописывать не только для людей с особенностями. Он может пригодиться и в ситуации, когда человек попал в зону плохого соединения с интернетом. И, если не подгрузились картинки, можно прочитать, что изображено.
На мобильных устройствах с этим чуть сложнее, потому что смартфонами слабовидящие люди пользуются по-особенному. Например, если вы делаете банковское приложение, учитывайте, что ими пользуются все: пенсионеры, студенты, люди с плохим зрением и другими особенностями.
Приложения крупных разработчиков стараются учитывать это. Например, Яндекс.Go поддерживает работу с программами экранного доступа. Незрячие пользователи могут без посторонней помощи заказать такси не только по телефону, но и с компьютера или мобильного устройства.
Большинство интернет-пользователей в России пользуются маркетплейсами и онлайн-магазинами для совершения ежедневных покупок. И часто бывает так, что попадая на ресурс и испытывая какую-то заминку или сложность при изучении сайта, потенциальный покупатель покидает интернет-магазин, не успев оформить заказ. Определенный процент отказа посетителей при посещении сайта присутствует всегда. Но если объем трафика на ресурсе достаточно высокий, тогда ошибки в юзабилити интернет-магазина могут привести к значительным убыткам для предпринимателя. Важно вовремя понять, какие сложности испытывают покупатели на сайте и как это можно исправить, чтобы пользовательский интерфейс не стал причиной низкой конверсии ресурса.
1. Сложная навигация
Это ошибка считается самой распространенной среди владельцев бизнесов, у которых есть сайты. Иногда, желая выделиться среди конкурентов и сделать нечто оригинальное, предприниматель игнорирует базовые понятия удобства сайта и правила расположения главных элементов. Хоть понятие удобства в интернет-магазине и является субъективным, все же не стоит усложнять жизнь покупателям и дезориентировать их.
В интернет-магазине должны присутствовать основные блоки, они располагаются вверху. Справа в верхней строчке принято размещать активную кнопку с контактами (телефон, адрес магазина, электронная почта). Логотип фирмы лучше поместить в левый верхний угол, а меню с основными разделами — слева сбоку. Также в шапке сайта можно указать важную информацию о стоимости услуг, добавить ссылку на отзывы или кейсы. Такое отображение элементов считается общепринятым и инстинктивно понятным для большинства пользователей.
Чтобы человеку не пришлось каждый раз думать о том, куда нужно нажать и гадать, в какой же раздел он попадет, стоит заранее продумывать структуру сайта и навигацию. У любого ресурса должна быть четкая иерархия, а вложенность страниц не превышать 2-3. Но если оказалось так, что этот момент требует доработки, следует на некоторое время остановить продажи, чтобы программист мог спокойно исправить систему навигации.
2. Обилие текста и недостаток визуала
Избыток информации в виде длинных текстовых описаний может оттолкнуть любого, даже самого непритязательного клиента. Мало кто захочет изучать преимущества магазина или характеристики товара, если данные представлены в виде сплошного длинного текста, особенно если использован мелкий шрифт. При оформлении любого блока на сайте следует предусмотреть возможность использования изображений. Текст с картинками людям воспринимать проще, чем без них. Но не стоит вставлять первые попавшиеся картинки. Лучше нанять фотографа и разместить на сайте качественные, уникальные изображения, которые явно демонстрируют преимущества бренда.
Если сократить информацию не получается и текст получается довольно объемным, следует принять во внимание правила типографики для интернет-ресурсов. Вот как можно преобразить нечитаемый «кирпич» текста и сделать его более легким для восприятия:
- Использовать один шрифт на сайте. В редких случаях допускается сочетание шрифтов, когда для оформления применяют не 1, а 2-3 шрифта.
- Не увлекаться шрифтами с засечками. Если в заголовке есть засечки, то в самом тексте их быть не должно.
- Разбивать текст на смысловые абзацы.
- Использовать заголовки и подзаголовки для структурирования информации и облегчения восприятия.По
- ещать текст в плашку для создания акцента.
- Разбавлять текст фотографиями и видео.
3. Отсутствие хлебных крошек
Перемещаясь по сайту, пользователи могут потеряться среди разделов. Поэтому, чтобы клиентам было проще ориентироваться в интернет-магазине, следует использовать навигационную цепочку или так называемые хлебные крошки. Наличие навигационной цепочки как на десктопе, так и в мобильной версии приложения, позволяет покупателю легко возвращаться на предыдущий этап поиска, не вводя каждый раз запрос по-новому. Также хлебные крошки удобны тем, что клиент всегда может понять, к какому из разделов относится конкретная вещь или другое изделие и использовать эти знания в дальнейшем при поиске необходимых товаров.
4. Сложная форма регистрации
Когда пользователь попадает на сайт и собирается пройти регистрацию, он ожидает, что эта процедура пройдет легко и быстро. Поэтому не стоит добавлять слишком много полей в регистрационную форму, чтобы не оттолкнуть потенциальных покупателей. Пусть пользователь заполнит только самые необходимые поля для регистрации, указав свое имя и фамилию и контактные данные. А остальную информацию он сможет указать позже, на сайте в личном кабинете. Кстати, за заполнение подробной анкеты интернет-магазины обычно начисляют клиенту бонус, который он позже сможет потратить на покупки.
5. Хаотическое отображение главного экрана
Как показывают маркетинговые исследования, информацию на главном экране сайта изучает лишь 5-10% посетителей. И тем не менее, это не означает, что первый экран ресурса можно оформить как захочется. Необязательно тратить деньги на создание уникального дизайнерского баннера для интернет-магазина. Важно понять, что главный экран должен быть информативным, а визуальный шум в виде хаотично вставленных баннеров и мини-блоков только усугубляет ситуацию. Даже если те 10% покупателей захотят получить больше информации о бренде, изучая первый экран, который не отражает суть работы компании, скорее всего, они покинут страницу, так и не совершив заказ.
Избыточная информация лишь вызывает затруднения у пользователей и никак не помогает сконцентрироваться. Обилие различных блоков и элементов на первом экране может отпугнуть потенциальных клиентов. Чтобы этого не произошло, следует разработать модульную сетку для сайта, в которой будут располагаться шаблоны будущих элементов и дизайнов. Благодаря модульной сетке интернет-магазин обретет структуру и единообразие, что поможет клиентам проще воспринимать контент. Если случилось так, что главный экран выглядит «пустым», можно заполнить свободное пространство оффером или уникальным торговым предложением.
6. Отсутствие оффера и УТП
Иногда при переходе на ресурс, пользователь не понимает, что продают на сайте и чем эта веб-страница может ему помочь. Если так случилось, это означает, что у компании нет оффера и скорее всего, отсутствует и УТП. Попадая в такой интернет-магазин, где нет ни слова о том, чем занимается фирма, клиент очень быстро понимает, что ему здесь делать нечего и ищет другой ресурс. Отсутствие оффера — это стратегическая ошибка, которая может обойтись очень и очень дорого. В каждой, даже узкой сфере есть десятки и сотни конкурентов, которые не спят и следят за своими соперниками. Сейчас покупатели стали более придирчивы, они избалованы возможностью выбора. Поэтому удерживать внимание посетителей нужно грамотно.
При формировании оффера не стоит использовать банальные и широко распространенные фразы, которые не отражают сути бизнеса. Например, оффер в стиле «индивидуальный подход, опытные сотрудники, работаем для вас» никак не поможет привлечь клиентов и не заинтересует их. Торговое предложение должно подчеркивать ценность продукта и раскрывать выгоды для покупателей, отражать информацию о выгодных условиях сделки.
Чтоб составить продающий оффер или уникальное торговое предложение, не обойтись без четкого знания своей целевой аудитории. Отталкиваясь от потребностей, болей и предпочтений потенциальных клиентов, и следует разрабатывать такое предложение, которое будет отличаться от предложений конкурентов и четко отвечать на ряд вопросов:
- что продают на этом сайте;
- на кого рассчитано это торговое предложение;
- почему данное предложение должно заинтересовать покупателя;
- чем это предложение отличается от других конкурентных предложений.
Важно также помнить о том, что оффер на сайте должен соответствовать тексту в рекламном объявлении. Часто предприниматели и маркетологи, пытаясь привлечь как можно больше посетителей на сайт с помощью контекстной и таргетированной рекламы, забывают о том, что информация в объявлении и на сайте отличается. Например, если пользователь заинтересовался рекламой, где ему обещают посудомоечную машину со скидкой за 15 тысяч рублей, а на сайте такого товара нет и о скидках не говорится ни слова, покупатель сразу же покинет страницу и потеряет доверие к бренду.
7. Всплывающие окна
Практически на каждом сайте можно встретить различные поп-апы и всплывающие окна, которые рекламируют какой-то товар или предлагают онлайн-консультацию со специалистом. Если поп-ап появляется слишком часто или его трудно закрыть, или всплывающих окон на ресурсе несколько, это может серьезно сказаться на посещаемости интернет-магазина. Сам по себе поп-ап не является плохим инструментом для продвижения. Но стоит позаботиться о своих клиентах и настроить появление окон таким образом, чтобы пользователь в любой момент смог его закрыть. То есть, у поп-апа обязательно должен быть виден крестик в углу, а его появление лучше настроить так, чтобы окно всплывало через 30-60 секунд после перехода пользователя на сайт. А можно встроить попа-ап так, чтобы он был абсолютно ненавязчивым.
8. Незаполненные разделы
Иногда случается так, что у предпринимателя или программиста не хватает времени на заполнение всех разделов сайта. Такое может случится и при отсутствии подходящего контента. Но лучше так не поступать. Дело в том, что пользователь, когда видит пустые страницы в интернет-магазине, испытывает ощущение того, что ресурс еще сырой, недоделанный, и скорее всего, доверять такому бренду не стоит. Поэтому нужно позаботиться о том, чтобы абсолютно все разделы сайта содержали актуальную информацию и были оформлены подобающе.
9. Контент из фотостоков
Иногда предприниматель, пытаясь сэкономить деньги и время на создании качественного контента, использует фотографии с открытых источников. Когда-то это было допустимым и почти никак не влияло на конверсию интернет-магазина. Но теперь, когда фото и видео контент заполонил интернет-пространство и социальные сети, стало труднее соперничать с конкурентами. Теперь выигрывает тот, кто сумел завладеть вниманием покупателей и привлечь клиентов на сайт благодаря определенным преимуществам, которые тоже можно выразить с помощью изображения.
Использовать стоковые изображения нельзя ни в коем случае, иначе предприниматель может забыть о продажах. Демонстрировать продукты и услуги покупателям нужно только через собственный контент. Для этого не стоит пытаться сэкономить, лучше нанять профессионального фотографа, пригласить опытных моделей и арендовать подходящую студию. Результат не заставит себя долго ждать.
Когда люди выбирают, на каком сайте совершить покупку, они долго изучают отзывы, кейсы. портфолио. Особенно, если будущая покупка относится к категории дорогостоящих. Без социального доказательства сегодня трудно продавать даже одежду. Ведь без наличия реальных отзывов мало кто захочет оформлять заказ, да еще и по предоплате. Поэтому как только появятся первые положительные отзывы, сразу нужно оформлять специальный раздел и публиковать там обратную связь.
Часто клиенты не особо охотно оставляют отзывы. Поэтому можно предложить им какой-то бонус: скидку или бесплатную доставку на следующий заказ при условии оставления обратной связи. Если бизнесмен предоставляет какие-то услуги, обязательно нужно оформлять кейсы, где четко обозначать ситуацию клиента до и после того как он обратился за помощью. Следует прописывать исходную ситуацию, проблемы, цели и задачи, способы, которые помогли решить проблему.
В отдельном разделе, посвященному компании, рекомендуется публиковать новости фирмы и размещать ссылки на другие источники, в которых упоминается бренд. Также необходимо демонстрировать экспертность, если это бизнес по оказанию услуг. Демонстрация социального доказательства хорошо работает для таких сфер, как частная медицина, услуги юристов, адвокатов, нотариусов, психологов, мастеров красоты.
Коротко о главном
Исправить ошибки в пользовательском интерфейсе на сайте не так уж сложно, но все же стоит постараться и вовсе их не допускать. Такие мелочи, как неудобная навигация, отсутствие хлебных крошек или стоковые изображения, на первый взгляд, не представляют серьезной опасности для бизнеса. Но на самом деле, это может нанести удар репутации бренда. Если определенный процент покупателей при посещении ресурса наткнется на ряд таких недоработок и поймет, что совершать покупки здесь неудобно, то предприниматель окончательно потеряет эту аудиторию как потенциальных клиентов. Но даже если сайт отличается высоким качеством контента и способен составить достойную конкуренцию соперникам, не стоит расценивать это как данность. В условиях современной жесткой конкуренции следует всегда держать руку на пульсе и следить за поведением посетителей на ресурсе и за трендами в пользовательском интерфейсе.
Возможно вам также будет интересно:
Распространенные ошибки в дизайне пользовательского интерфейса
На чтение 3 мин. Просмотров 10 Опубликовано 26.11.2022
В физиологии человека зрение играет важную роль, поскольку 83% информации человек воспринимает с помощью зрения. Поэтому ваш сайт никогда не должен испытывать недостатка в визуальной привлекательности. В веб-дизайне это еще более важно. Каждая новая итерация дизайна оставляет некоторые незначительные отклонения. Иногда эти незначительные визуальные отклонения бывает очень трудно исправить или они неосознанно нарушают весь пользовательский опыт. Следовательно, необходимо убедиться, что ваш сайт предоставляет пользователю идеальный и рабочий дизайн интерфейса.
Возникает вопрос, на какие факторы следует обратить внимание при тестировании дизайна интерфейса вашего сайта или приложения? Каковы наиболее распространенные ошибки, которые могут остаться незамеченными?
Чтобы облегчить вам задачу, мы собрали некоторые из распространенных ошибок, которые можно встретить в дизайне пользовательского интерфейса.
Эй! Знаете ли вы, что свойство background-clip позволяет вам контролировать место отображения фоновых изображений, а свойства background-origin и background-size обеспечивают большую гибкость в выборе размера фоновых изображений.
Содержание
- Что это такое?
- 1. Макет
- 2. Шрифт
- 3. Цвет
- 4. Содержание
- 5. Изображения
Что это такое?
1. Макет
-
Несоответствие (например: ошибка плавающего двойного поля, эффект лестницы, ошибка модели коробки IE6, неправильный плавающий макет, ошибка падения плавающего макета, ошибка гильотины, ошибка изменения размера IE).
-
Перекрытие (например: автоматическое переполнение)
-
Отсутствующее содержимое/изображения
-
Пробелы (например: ширина строки, высота строки, нежелательный пробел между элементами списка, ошибка вертикального пробела)
2. Шрифт
-
Шрифт одного семейства, но разного типа (например, шрифт helvetica lite, но разработчик поставил helvetica regular).
-
Использованы шрифты разных семейств
-
Несоответствие размера шрифта
3. Цвет
-
Несоответствие цветового кода по нескольким причинам
-
Цвет кнопки должен был измениться при отключении, но этого не произошло
Проверьте это на CSS background-repeat round and space : Он позволяет повторять фоновые изображения CSS без обрезания. Поскольку это свойство, его можно изменять с помощью CSS, чтобы изменить положение, отвлечь или сфокусировать внимание.
4. Содержание
-
Различия в верхнем и нижнем регистре
-
Несовпадение букв/слов
-
Несоответствие изображений
-
Орфографические ошибки
5. Изображения
В некоторых браузерах, таких как IE, иногда можно заметить, что изображения мерцают. Одна из причин заключается в том, что браузеры не могут правильно кэшировать фоновые изображения и вынуждены перезагружать их снова и снова.
Это некоторые из распространенных визуальных ошибок пользовательского интерфейса, которые иногда остаются незамеченными человеческими глазами и поэтому их очень сложно найти. Но вы можете быть уверены, что из тысяч и миллионов конечных пользователей, которые посетят ваш сайт, хотя бы один их обнаружит. Что довольно неудобно, не так ли?
Поэтому, чтобы обнаружить эти ошибки визуального пользовательского интерфейса до того, как конечные пользователи укажут на них, мы разработали специальную функцию — Smart Visual UI Testing. Эта функция позволит вам сравнивать изображения: Базовое изображение с изображениями сравнения, чтобы найти все визуальные дефекты пользовательского интерфейса одним щелчком мыши.
Знаете ли вы, что CSS3 Border-radius (закругленные углы) используется для создания закругленных углов со всех четырех сторон границы элемента. Он также включает поддержку сокращения.
Функциональность.
Взаимодействие
программы с пользователем.
Организация
программы.
Пропущенные
команды.
Производительность.
Выходные
данные.
Обработка
ошибок.
Ошибки,
связанные с обработкой граничных
условий.
Ошибки
вычислений.
Начальное
и последующие состояния.
Ошибки
управления потоком.
Ошибки
передачи или интерпретации данных.
Ситуация
гонок.
Перегрузки.
Аппаратное
обеспечение.
Контроль
версий.
Документация.
Ошибки
тестирования.
17
Архитектура программного обеспечения
(англ. software architecture) — это структура
программы или вычислительной системы,
которая включает программные компоненты,
видимые снаружи свойства этих компонентов,
а также отношения между ними. Этот термин
также относится к документированию
архитектуры программного обеспечения.
Документирование архитектуры ПО упрощает
процесс коммуникации между заинтересованными
лицами (англ. stakeholders), позволяет
зафиксировать принятые на ранних этапах
проектирования решения о высокоуровневом
дизайне системы и позволяет использовать
компоненты этого дизайна и шаблоны
повторно в других проектах.
Виды
(views)
Архитектура
ПО обычно содержит несколько видов,
которые аналогичны различным типам
чертежей в строительстве зданий. В
онтологии, установленной ANSI
/ IEEE
1471-2000, виды являются экземплярами точки
зрения, где точка зрения существует для
описания архитектуры с точки зрения
заданного множества заинтересованных
лиц.
Примеры
видов:
*
Функциональный/логический вид
*
Вид код/модуль
*
Вид разработки (development)/структурный
*
Вид параллельности выполнения/процесс/поток
*
Физический вид/вид развертывания
*
Вид с точки зрения действий пользователя
*
Вид с точки зрения данных
Хотя
было разработано несколько языков для
описания архитектуры программного
обеспечения, но в настоящий момент нет
согласия по поводу того, какой набор
видов должен быть принят в качестве
эталона. В качестве стандарта «для
моделирования программных систем (и не
только)» был создан язык UML.
Базовые
фреймворки для архитектуры ПО (software
architecture
frameworks)
Существуют
следующие фреймворки, относящихся к
области архитектуры ПО:
4+1
RM-ODP
(Reference Model of Open Distributed Processing)
Service-Oriented
Modeling Framework (SOMF)
Такие
примеры архитектур как фреймворк Захмана
(Zachman Framework), DODAF и TOGAF относятся к области
архитектуры предприятия (enterprise
architectures).
18 Разработка и оценка архитектуры на основе сценариев
При
проектировании архитектуры системы на
основе требований, зафиксированных в
виде вариантов использования, первые
возможные шаги состоят в следующем.
Выделение
компонентов
Выбирается
набор «основных» сценариев
использования — наиболее существенных
и выполняемых чаще других.
Исходя
из опыта проектировщиков, выбранного
архитектурного стиля (см. следующую
лекцию) и требований к переносимости и
удобству сопровождения системы
определяются компоненты, отвечающие
за определенные действия в рамках этих
сценариев, т.е. за решение определенных
подзадач.
Каждый
сценарий использования системы
представляется в виде последовательности
обмена сообщениями между полученными
компонентами.
При
возникновении дополнительных хорошо
выделенных подзадач добавляются новые
компоненты, и сценарии уточняются.
Определение
интерфейсов компонентов
Для
каждого компонента в результате
выделяется его интерфейс — набор
сообщений, которые он принимает от
других компонентов и посылает им.
Рассматриваются
«неосновные» сценарии, которые так
же разбиваются на последовательности
обмена сообщениями с использованием,
по возможности, уже определенных
интерфейсов.
Если
интерфейсы недостаточны, они расширяются.
Если
интерфейс компонента слишком велик,
или компонент отвечает за слишком
многое, он разбивается на более мелкие.
Уточнение
набора компонентов
Там,
где это необходимо в силу требований
эффективности или удобства сопровождения,
несколько компонентов могут быть
объединены в один.
Там,
где это необходимо для удобства
сопровождения или надежности, один
компонент может быть разделен на
несколько.
Достижение
нужных свойств.
Все
это делается до тех пор, пока не выполнятся
следующие условия:
Все
сценарии использования реализуются в
виде последовательностей обмена
сообщениями между компонентами в рамках
их интерфейсов.
Набор
компонентов достаточен для обеспечения
всей нужной функциональности, удобен
для сопровождения или портирования на
другие платформы и не вызывает заметных
проблем производительности.
Каждый
компонент имеет небольшой и четко
очерченный круг решаемых задач и строго
определенный, сбалансированный по
размеру интерфейс.
19,20
UML (англ. Unified Modeling Language — унифицированный
язык моделирования) — язык графического
описания
для объектного моделирования в области
разработки программного обеспечения.
UML является языком широкого профиля,
это открытый стандарт, использующий
графические обозначения для создания
абстрактной модели системы, называемой
UML-моделью. UML был создан для определения,
визуализации, проектирования и
документирования в основном программных
систем. UML не является языком
программирования, но в средствах
выполнения UML-моделей как интерпретируемого
кода возможна кодогенерация.
UML.
Виды диаграмм UML
Для
представления архитектуры, а, точнее,
различных входящих в нее структур,
удобно использовать графические языки.
На настоящий момент наиболее проработанным
и наиболее широко используемым из них
является унифицированный язык
моделирования (Unified Modeling Language, UML) [5,6,7],
хотя достаточно часто архитектуру
системы описывают просто набором
именованных прямоугольников, соединенных
линиями и стрелками, которые представляют
возможные связи.
UML.
Виды диаграмм UML
Для
представления архитектуры, а, точнее,
различных входящих в нее структур,
удобно использовать графические языки.
На настоящий момент наиболее проработанным
и наиболее широко используемым из них
является унифицированный язык
моделирования (Unified Modeling Language, UML) [5,6,7],
хотя достаточно часто архитектуру
системы описывают просто набором
именованных прямоугольников, соединенных
линиями и стрелками, которые представляют
возможные связи.
UML
предлагает использовать для описания
архитектуры 8 видов диаграмм. 9-й вид UML
диаграмм, диаграммы вариантов использования
(см. лекцию 4), не относится к архитектурным
представлениям. Кроме того, и другие
виды диаграмм можно использовать для
описания внутренней структуры компонентов
или сценариев действий пользователей
и прочих элементов, к архитектуре часто
не относящихся. В этом курсе мы не будем
разбирать диаграммы UML в деталях, а
ограничимся обзором их основных
элементов, необходимым для общего
понимания смысла того, что изображено
на таких диаграммах.
Диаграммы
UML делятся на две группы — статические
и динамические диаграммы.
Статические
диаграммы
Статические
диаграммы представляют либо постоянно
присутствующие в системе сущности и
связи между ними, либо суммарную
информацию о сущностях и связях, либо
сущности и связи, существующие в какой-то
определенный момент времени. Они не
показывают способов поведения этих
сущностей. К этому типу относятся
диаграммы классов, объектов, компонентов
и диаграммы развертывания.
Диаграммы
классов (class diagrams) показывают классы или
типы сущностей системы, характеристики
классов (поля и операции) и возможные
связи между ними. Пример диаграммы
классов изображен на рис. 6.5.
Классы
представляются прямоугольниками,
поделенными на три части. В верхней
части показывают имя класса, в средней
— набор его полей, с именами, типами,
модификаторами доступа (public ‘+’,
protected ‘#’, private ‘-’) и начальными
значениями, в нижней — набор операций
класса. Для каждой операции показывается
ее модификатор доступа и сигнатура.
Интерфейсы,
т.е. типы, имеющие только набор операций
и не определяющие способов их реализации,
часто показываются в виде небольших
кружков, хотя могут изображаться и как
обычные классы. На рис. 6.5 представлен
интерфейс AccountInterface.
Наиболее
часто используется три вида связей
между классами — связи по композиции,
ссылки, связи по наследованию и реализации.
Композиция
описывает ситуацию, в которой объекты
класса A включают в себя объекты класса
B, причем последние не могут разделяться
(объект класса B, являющийся частью
объекта класса A, не может являться
частью другого объекта класса A) и
существуют только в рамках объемлющих
объектов (уничтожаются при уничтожении
объемлющего объекта).
Композицией
на рис. 6.5 является связь между классами
Organization и Address.
Ссылочная
связь (или слабая агрегация) обозначает,
что объект некоторого класса A имеет в
качестве поля ссылку на объект другого
(или того же самого) класса B, причем
ссылки на один и тот же объект класса B
могут иметься в нескольких объектах
класса A.
И
композиция, и ссылочная связь изображаются
стрелками, ведущими от класса A к классу
B. Композиция дополнительно имеет
закрашенный ромбик у начала этой стрелки.
Двусторонние ссылочные связи, обозначающие,
что объекты могут иметь ссылки друг на
друга, показываются линиями без стрелок.
Такая связь показана на рис. 6.5 между
классами Account и Client.
Эти
связи могут иметь описание множественности,
показывающее, сколько объектов класса
B может быть связано с одним объектом
класса A. Оно изображается в виде текстовой
метки около конца стрелки, содержащей
точное число или нижние и верхние
границы, причем бесконечность изображается
звездочкой или буквой n. Для двусторонних
связей множественности могут показываться
с обеих сторон. На рис. 6.5 множественности,
изображенные для связи между классами
Account и Client, обозначают, что один клиент
может иметь много счетов, а может и не
иметь ни одного, и счет всегда привязан
ровно к одному клиенту.
Наследование
классов изображается стрелкой с пустым
наконечником, ведущей от наследника к
предку. На рис. 6.5 класс CreditAccount наследует
классу Account, а классы Person и Organization —
классу Client.
Реализация
интерфейсов показывается в виде
пунктирной стрелки с пустым наконечником,
ведущей от класса к реализуемому им
интерфейсу, если тот показан в виде
прямоугольника. Если же интерфейс
изображен в виде кружка, то связь по
реализации показывается обычной сплошной
линией (в этом случае неоднозначности
в ее толковании не возникает). Такая
связь изображена на рис. 6.5 между классом
Account и интерфейсом AccountInterface.
Один
класс использует другой, если этот
другой класс является типом параметра
или результата операции первого класса.
Иногда связи по использованию показываются
в виде пунктирных стрелок. Пример такой
связи между классом Person и перечислимым
типом AddressKind можно видеть на рис. 6.5.
Ссылочные
связи, реализованные в виде ассоциативных
массивов или отображений (map) — такая
связь в зависимости от некоторого набора
ключей определяет набор ссылок-значений
— показываются при помощи стрелок,
имеющих прямоугольник с перечислением
типов и имен ключей, примыкающий к
изображению класса, от которого идет
стрелка. Множественность на конце
стрелки при этом обозначает количество
ссылок, соответствующее одному набору
значений ключей.
На
рис. 6.5 такая связь ведет от класса Person
к классу Address, показывая, что объект
класса Person может иметь один адрес для
каждого значения ключа kind, т.е. один
домашний и один рабочий адреса.
Диаграммы
классов используются чаще других видов
диаграмм.
Диаграммы
объектов (object diagrams)
показывают часть объектов системы и
связи между ними в некотором конкретном
состоянии или суммарно, за некоторый
интервал времени.
Объекты
изображаются прямоугольниками с
идентификаторами ролей объектов (в
контексте тех состояний, которые
изображены на диаграмме) и типами.
Однородные коллекции объектов могут
изображаться накладывающимися друг на
друга прямоугольниками.
Такие
диаграммы используются довольно редко.
увеличить
изображение
Рис.
6.6.
Диаграмма объектов
Диаграммы
компонентов (component diagrams) представляют
компоненты в нескольких смыслах —
атомарные составляющие системы с точки
зрения ее сборки, конфигурационного
управления и развертывания. Компоненты
сборки и конфигурационного управления
обычно представляют собой файлы с
исходным кодом, динамически подгружаемые
библиотеки, HTML-странички и пр., компоненты
развертывания — это компоненты JavaBeans,
CORBA, COM и т.д. Подробнее о таких компонентах
см. лекцию 12.
Компонент
изображается в виде прямоугольника с
несколькими прямоугольными или другой
формы «зубами» на левой стороне.
Связи,
показывающие зависимости между
компонентами, изображаются пунктирными
стрелками. Один компонент зависит от
другого, если он не может быть использован
в отсутствии этого другого компонента
в конфигурации системы. Компоненты
могут также реализовывать интерфейсы.
Диаграммы
этого вида используются редко.
Рис.
6.7.
Диаграмма компонентов
На
диаграмме компонентов, изображенной
на рис.
6.7,
можно также увидеть пакеты,
изображаемые в виде «папок», точнее
— прямоугольников с прямоугольными
«наростами» над левым верхним
углом. Пакеты являются пространствами
имен и средством группировки диаграмм
и других модельных элементов UML —
классов, компонентов и пр. Они могут
появляться на диаграммах классов и
компонентов для указания зависимостей
между ними и отдельными классами и
компонентами. Иногда на такой диаграмме
могут присутствовать только пакеты с
зависимостями между ними.
Диаграммы
развертывания (deployment diagrams) показывают
декомпозицию системы на физические
устройства различных видов — серверы,
рабочие
станции,
терминалы, принтеры, маршрутизаторы и
пр. — и связи между ними, представленные
различного рода сетевыми и индивидуальными
соединениями.
Физические
устройства, называемые узлами
системы (nodes),
изображаются в виде кубов или
параллелепипедов, а физические соединения
между ними — в виде линий.
На
диаграммах развертывания может быть
показана привязка (в некоторый момент
времени или постоянная) компонентов
развертывания системы к физическим
устройствам — например, для указания
того, что компонент EJB AccountEJB исполняется
на сервере приложений, а аплет
AccountInfoEditor — на рабочей станции оператора
банка.
увеличить
изображение
Рис.
6.8.
Диаграмма развертывания
Эти
диаграммы используются достаточно
редко. Пример диаграммы развертывания
изображен на рис.
6.8.
Динамические
диаграммы
Динамические
диаграммы описывают происходящие в
системе процессы. К ним относятся
диаграммы
деятельности, сценариев,
диаграммы взаимодействия и диаграммы
состояний.
-
Диаграммы
деятельности (activity diagrams)
иллюстрируют набор процессов-деятельностей
и потоки данных между ними, а также
возможные их синхронизации друг с
другом.
Деятельность
изображается в виде прямоугольника с
закругленными сторонами, слева и справа,
помеченного именем деятельности.
Потоки
данных показываются в виде стрелок.
Синхронизации двух видов — развилки
(forks)
и слияния
(joins)
— показываются жирными короткими
линиями (кто-то может посчитать их и
тонкими закрашенными прямоугольниками),
к которым сходятся или от которых
расходятся потоки данных. Кроме
синхронизаций, на диаграммах деятельности
могут быть показаны разветвления потоков
данных, связанных с выбором того или
иного направления в зависимости от
некоторого условия. Такие разветвления
показываются в виде небольших ромбов.
Диаграмма
может быть поделена на несколько
горизонтальных или вертикальных
областей, называемых дорожками
(swimlanes). Дорожки служат для группировки
деятельностей в соответствии с
выполняющими их подразделением
организации, ролью, приложением,
подсистемой и пр.
Диаграммы
деятельности могут заменять часто
используемые диаграммы потоков данных
(см. лекцию 4), поэтому применяются
достаточно широко. Пример такой диаграммы
показан на рис.
6.9.
Рис.
6.9.
Диаграмма активности
-
Диаграммы
сценариев (или
диаграммы последовательности, sequence
diagrams)
показывают возможные сценарии обмена
сообщениями или вызовами во времени
между различными компонентами системы
(здесь имеются в виду архитектурные
компоненты, компоненты в широком смысле
— это могут быть компоненты развертывания,
обычные объекты, подсистемы и пр.). Эти
диаграммы являются подмножеством
специального графического языка —
языка диаграмм последовательностей
сообщений (Message Sequence Charts, MSC),
который был придуман раньше UML и
достаточно долго развивается параллельно
ему.
Компоненты,
участвующие во взаимодействии,
изображаются прямоугольниками вверху
диаграммы. От каждого компонента вниз
идет вертикальная линия, называемая
его линией
жизни.
Считается, что ось времени направлена
вертикально вниз. Интервалы времени, в
которые компонент активен, т.е. управление
находится в одной из его операций,
представлены тонким прямоугольником,
для которого линия жизни компонента
является осью симметрии.
увеличить
изображение
Рис.
6.10.
Пример диаграммы сценария открытия
счета
Передача
сообщения или вызов изображаются
стрелкой от компонента-источника к
компоненту-приемнику. Возврат управления
показан пунктирной стрелкой, обратной
к соответствующему вызову.
Эти
диаграммы используются достаточно
часто, например, при детализации
сценариев, входящих в варианты
использования. Пример такой диаграммы
изображен на рис.
6.10.
|
Диаграммы
увеличить Рис. На Диаграммы Диаграммы Состояния Состояния
увеличить Рис. Состояние Помимо На Переходы На
Например,
Условие На
Действие Например, Диаграммы |
