Pull to refresh

Написание инструкций пользовательского интерфейса

Reading time 6 min
Views 13K
Original author: Connie Malamed

Написание инструкций пользовательского интерфейса


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

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

Ментальные модели

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

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

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

Это одна из главных причин, почему инструкции UI так важны. У людей также есть негативный опыт, когда их ментальные модели были неточными или неправильными. Такие случаи вызывают плохие эмоции, ошибки и невозможность достигнуть цели. Расстроенный посетитель может уйти на другой сайт, который легче использовать.

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

Вот некоторые рекомендации по написанию инструкций UI


1. Узнайте особенность вашей аудитории


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

Обратите внимание на пример выше. Юмористические инструкции формы CAPTCHA смогут понять только опытные и сообразительные посетители. Неопытные пользователей компьютера и те, кто не достаточно владеет английским, не знали бы, что «Подтвердить, что вы человек» означает ввести буквенно-цифровые символы в поле.

2. Баланс

Поиск баланса это всегда проблема. При написании инструкций UI, необходимо описать суть достаточно подробно, чтобы пользователи знали, что делать, но не настолько подробно, чтобы эти инструкции стали трудными для восприятия и чтения. За раз люди могут воспринять весьма небольшой объем информации.
Инструкции лучше писать на простом и доступном языке, который поможет посетителям выполнить свои задачи быстро и эффективно. Постарайтесь использовать короткие предложения, когда это возможно. Например, это предложение можно легко разбить на два: «Щелкните кнопку «Добавить в корзину», затем кнопку «Убрать» вверху экрана.»

3. Уберите ненужную информацию


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

4. Выберите наиболее эффективные и точные слова

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

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



В качестве примера выбора точности слов: когда вы смотрите на это меню, вы понимаете разницу между «Изучить» и «Просмотреть»?

5. Пишите в действительном залоге

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

6. Эстетическая часть

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

7. Обозначьте принадлежность строк

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

8. Выберите наиболее разборчивый шрифт

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

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


Да. Иногда практически невозможно что-то описать словами. Изображения в этом плане могут помочь нам. Например, как найти ваш номер счета на этикетке журнала.

10. Обратитесь лично


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

11. Сделайте инструкции доступными

Очень важно дать возможность прочесть инструкции людям, которым трудно прочесть мелкий шрифт и/или людям, использующим КПК или телефон.
Некоторые основные принципы обеспечения доступности при написании инструкций: избегать использования текста в виде картинок, т.к. будет невозможным увеличить размер шрифта (пункт 8); обеспечить текст альтернативным графическим содержанием; четко разделить текст инструкции от фона, чтобы он был легко видим. Кроме того, ссылки должны содержать в себе текст, несущий в себе смысл. Например, ссылка «Инструкция по использованию формы» лучше, чем «Нажмите здесь».

12. Проверьте инструкции

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

Возможно, вы будете удивлены тем, сколько времени и усилий потребуется для того, чтобы написать эффективные инструкции UI. Тем не менее, это может быть один из самых ценных этапов при разработке успешного UI. Благодаря простоте и хорошему восприятию инструкций, вы можете получить огромную поддержку пользователей с положительными отзывами, т.к. вы заботитесь о них.
Tags:
Hubs:
+42
Comments 36
Comments Comments 36

Articles