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

Автор оригинала: 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. Благодаря простоте и хорошему восприятию инструкций, вы можете получить огромную поддержку пользователей с положительными отзывами, т.к. вы заботитесь о них.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 36

    0
    Интересная статья!
      +1
      (напишу в действительном залоге):
      Вставьте картинки
        0
        Все метко и по делу.
          +3
          Невероятно капитанская статья, конечно… И раз уж вы сделали перевод текста, почему бы не сделать и перевод картинок?

          Вообще я считаю, что грамотно спроектированный интерфейс не должен вызывать кривотолков. Он должен уверенно вести пользователя за руку, не давая ему запутаться в паутине перекрёстных ссылок и многоуровневых меню. В идеале интерфейс должен работать в режиме диалога, или хотя бы в режиме вопрос-ответ. Также сомнительно, что сообщения в приказной форме будут приятны пользователю. «Нажмите на дату» — зачем? Что это даст? Чего это ты мне указываешь? Оно действительно необходимо? Теория близости (пункт 7) — вообще с другой оперы.
            0
            По поводу «приказной формы»: тут имеется ввиду не приказная форма, а именно форма в действительном залоге. Пример даже самого хабрахабра, пишем комментарий — ссылка «написать комментарий», а не «написание комментария» или т.п., кнопка «написать».

            " «Нажмите на дату» — зачем? Что это даст? " — думаю в контексте самой системы, где это моглы бы быть применено — грамотное расположение даст ответы на эти вопросы. Описана лишь суть.
              –1
              При чём здесь действительный залог? Найдите своего учителя по русскому языку и дайте ему в глаз :).
              То, что вы имеете в виду («Кликните на ссылке «Журнал» чтобы найти статью», кстати, это довольно криво, надо бы поменять местами части предложения), называется побудительным наклонением. То есть глагол «кликните» находится в побудительном наклонении. Да, залог у всех глаголов там действительно действительный :), но к делу это отношения не имеет (см. ниже).
              А то, что вы называете «страдательным залогом» («Необходимо кликнуть ссылку «Журнал», чтобы найти статью»), таковым вообще не является (тут все глаголы тоже в действительном залоге), а является… гм… тут я зуб не дам, но, насколько мне изменяет память, это что-то вроде «неопределённо-личного предложения». Или «обобщённо-личного».
              Страдательный залог, в подобном случае, довольно сложно употребить и выглядеть это будет смешно и странно. Что-то вроде, — «если кликнуть на ссылку, то найдётся статья». :) Первая часть — неопределённо-личная, вторая — страдательная. :) Или наоборот, — «чтобы найти статью, ссылка должна быть нажата». Оба варианта могут быть употреблены (вот он! тоже! страдательный залог! :) разве только в шутку.
            +4
            Плохой пример в пункте 5) с точки зрения русского языка: «Кликните на ссылке «Журнал» чтобы найти статью». Зачем мне читать «что сделать» и только потом «зачем».

            Сравните:
            «Кликните на ссылке «Журнал» чтобы найти статью» (плохо)
            «Чтобы найти статью, кликните на ссылке «Журнал»» (хорошо)
            «Чтобы найти статью, кликните «Журнал»» (отлично)

            Хотите статью на тему написания инструкций пользователя? :)
              +4
              «Найти статью» (превосходно) :)
                +2
                Если ссылкой, то да, а если в качестве внутриинтерфейсной справки или в руководстве пользователя — то нет.
                  +1
                  в таком случае и справка особо не нужна.
                  я, кстати, стараюсь обойтись без справочной информации — интерфейс должен быть максимально интуитивен и понятен.
                    0
                    Похвально, но не реально =)
                      0
                      можете привести пример интерфейса, в котором не обойтись без справочной информации?
                      … попробую его переделать…
                      (отчаянно борюсь с самоуверенностью)
                        0
                        CAPTCHA форма в соц. сети, которой пользуются абсолютно все слои населения), от детей, до бабушек.
                          0
                          а что непонятного в « Введите цифры: [______] 010 »?
                            0
                            «Введите цифры:» — это и есть инструкция UI
                              0
                              я имел ввиду дополнительную справочную информацию, отдельно от интерфейса.
                          +3
                          Рычаг переключения передачи в машине.
                          Пока инструкцию не прочитаешь — ничего не понятно.
                            0


                            Сразу скажу, что я — не автомобилист и это — набросок.
                              +1
                              Зачёт, но переключать передачу можно только выжав сцепление.
                              Также существуют (иногда очень важные) рекомендации типа «трогаться на второй при гололёде» и «не переключать в повороте» — то есть случай реальный, без справки (отдельной инструкции) всё-таки не обойтись.
                                0
                                я все это прочитал, но решил, что подобные «хинты» не так актуальны.
                                можно дополнить… ) особенно про сцепление
                            0
                            Практически любая CAD-система.
                              0
                              если сделать ее менее компактной с выезжающими при наведении панелями с коротким, но емким описанием… по крайней мере можно попытаться, сомневаюсь правда, что кто-либо это делал, ибо все привыкли к кнопочным и минималистичным интерфейсам.

                              также читайте ниже — следующий коммент от apple_fan
                                0
                                Именно поэтому в таких программах клавиатурные сокращения намного удобнее поиска нужной кнопочки. Кнопочками пользуешься только для редко выполняемых действий.
                                  0
                                  в этом плане мне по душе Google SketchUp — еще удобнее пользоваться мышью, чем клав. сокр.
                          +1
                          Вы совершенно верно говорите, что интерфейс должен быть понятен. Однако, Вы не уточнили, кому он должен быть понятен.

                          Возьмём пример с переключателем передач. Интерфейс, который рассказывает, где какая передача очень прост. На ручке-переключателе рисуют схему вроде:


                          Для человека, кода-либо возродившего автомобиль с ручной передачей всё понятно: 5 скоростей и задняя.

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

                          Интерфейс создаётся для конкретных людей и должен удовлетворять именно их нужды. Стало быть, если 80-и процентам пользователей инструкции помогут, стоит эти инструкции добавить, если 80 процентов и так знают, что к чему, то лишние надписи будут только мешать.
                            0
                            спасибо за разъяснение, полностью с вами согласился.
                    –2
                    Очень хороший грамотный пост настраивающий на правильную волну без лишних эммоций!
                      +2
                      статья так себе (много воды и всем известной информации), но это «заслуга» автоа, а не переводчика.

                      очень сухой безжизненный перевод. неприятно читать.
                        0
                        Тема интересная, но перевод так себе…

                        Назвали бы ее «Инструкции непосредственно в пользовательском интерфейсе», например — сразу было бы понятно о чем речь. А сейчас «Написание инструкций пользовательского интерфейса» — звучит не по-русски и не особо раскрывает смысл статьи.
                          +1
                          Статья в корне ошибочная. Потому что UI вообще не предполагает наличия инструкций. Хроший UI, естественно.

                          Если пользователи чего-то не понимают и часто обращаются к справке, то стоит лучше задуматься о доработке интерфейса, нежели о том, каким образом нужно вылизывать инструкцию.
                            +1
                            Если речь и о UI сайта, платежного терминала и п.т. — то да, а если речь об UI 3Dmax?:)
                              –3
                              Я хочу сказать, что наличие инструкции не приоритетное. Наивысший приоритет имеет именно UI. Причем, как Вы, возможно, знаете интерфейс тем лучше, чем меньше о нем думает пользователь :)
                              Конечно, документация специфичных нетривиальных интерфейсов (вот взять тот же 3D's Max, от которого я кстати, тоже не в восторге) обязательна чтобы покрыть процент людей, которые так и не могут приспособиться к этому UI. Но чем больше таких запросов на справку, тем хуже сам UI.

                              Нет, я все же за то, чтобы делать хорошие интерфейсы, а не их описание.

                              И нефиг писать (переводить) капитанские статьи на эту тему — это делает хабр «уже не тем» :(

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



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

                              Вообще статья является хорошей переработкой идей Купера в его «About face».
                                0
                                UI не предполагает инструкций в буквальном смысле слова, но нельзя не признать, что во многих интерфейсах текстовая часть так или иначе присутствует. И зачастую из-за небрежного отношения к подбору языковых выражений возникают проблемы. Вот Вам конкретный пример. В банкоматах некоторых банков при снятии наличных приходится сталкиваться со следующим диалогом «С какого счета Вы хотите снять деньги: сберегательный/текущий/кредитный?». Поймут ли смысл этого диалога люди, незнакомые с банковской терминологией? Вряд ли. А вот недоумения и затруднения могут возникнуть у многих.
                                0
                                В описание визуальные примеры на много лучше могут преподнести информацию чем просто текст!

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                Самое читаемое