UXDepot
Компания
54,03
рейтинг
28 марта 2014 в 17:15

Дизайн → Хороший дизайн интерфейсов. Часть 3 перевод tutorial

Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

Идея 28


Используйте варианты по-умолчанию, не заставляя людей выбирать


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




Идея 29
Используйте традиционные идеи и не пытайтесь изобрести колесо


Традиция — это старшая сестра последовательности. Если по всему интерфейсу будут похожие элементы, людям не придётся мучиться. Ещё одно преимущество — это сокращает время обучения интерфейсу. С помощью сложившихся традиционных идей интерфейсов мы привыкаем закрывать окна в верхнем правом углу (в большинстве случаев) или ожидаем, что иконки настроек будут иметь определенный внешний вид. Конечно, бывают ситуации, когда традиции становятся неуместными и уступают дорогу новым шаблонам. В таких случаях, убедитесь, что они имеют смысл и несут в себе добрые намерения.





Идея 30
Используйте боязнь потери, а не подчеркивание преимуществ


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





Идея 31
Используйте визуальную иерархию вместо однообразности


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





Идея 32
Группируйте взаимосвязанные элементы, а не разбрасывайте их


Объединение связанных элементов — это основной путь улучшения дизайна интерфейса. Большинство из нас знает, что вилка и нож, или функции Открыть и Сохранить, обычно находятся рядом. Взаимосвязанные элементы просто должны быть рядом друг с другом, чтобы сохранять логику и снижать когнитивное трение. Люди не любят тратить время на поиски чего-либо.





Идея 33
Мгновенная проверка, вместо отложенных ошибок


Когда речь идет о формах и ошибках, обычно лучше обнаруживать и показывать ошибки как можно раньше. Широко известный шаблон взаимодействия, который мы хотим здесь подчеркнуть — это, конечно же, мгновенная проверка. Показывая сообщения об ошибках по мере их возникновения (например, справа от поля ввода), их можно исправлять сразу же, как только они появляются в контексте. С другой стороны, если показывать сообщения об ошибке позже (например, после отправки формы), это вынуждает людей выполнять дополнительную умственную работу, заставляя вспоминать, что они делали на предыдущих этапах.





Идея 34
Используйте свободный ввод данных, вместо строгого


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





Идея 35
Используйте срочность вместо неопределённости


Срочность — это тактика убеждения, которую можно использовать с целью побудить людей действовать сейчас, а не потом (или вообще никогда). Она довольно действенна, так как обычно подразумевает некое ограничение во времени, так как доступное сейчас может оказаться недоступным завтра. Также она эффективна, так как связана с боязнью потери и действует тем же образом — мы же не любим терять возможности. Срочность относится к одной из тех стратегий, к которым некоторые относятся свысока как к назойливому и грязному способу заставить людей действовать. Тем не менее, это доступная стратегия, которая работает, если использовать её честно. Будьте осторожны при создании ложного чувства срочности, так как если пользователи подловят вас на этом, оно будет иметь обратное действие.





Идея 36
Используйте ограниченность вместо изобилия


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





Идея 37
Дайте пользователю выбор, не заставляйте вспоминать


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





Идея 38
Используйте большие области реагирования, вместо крошечных


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





Это перевод советов проекта под названием "Good UI" от Jakub Linowski. Перевели в компании UXDepot с одобрением автора.

Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста :)
Автор: @DezmASter Jakub Linowski
UXDepot
рейтинг 54,03
Компания прекратила активность на сайте
Реклама помогает поддерживать и развивать наши сервисы

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

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

  • +4
    с 28 не соглашусь — это заставляет пользователя пропускать эти пункты, а вас получать в итоге не верные данные
    • +2
      Согласен. Нужно скорее так:

      Мы определили, что вы из Москвы. Это так? да / нет

      Пункт обязательный и требует от пользователя действия, но предзаполненый.
      • 0
        О том и речь :)
      • 0
        то есть пользователю не из москвы сперва придется кликнуть «нет», и только потом будет возможность выбрать другой город?
        дополнительный клик всем не-москвичам, чтобы сэкономить клик для москвичей?
        • +1
          Пользователю не из Москвы предложат «Мы определили, что вы из %usercity»
          • +1
            Боюсь, велик шанс ошибиться: люди заполняют анкеты будучи в командировке, в отпуске, да даже на работе в Москве, при этом проживая — в области.
            • 0
              Не настолько велик, чтобы отказываться от него.
        • +1
          При нажатии на «нет» нужно сразу открывать экран (форму/панель/список/окно) для выбора города. Это точно такой же «один клик», как и в случае, если сразу предлагать «Выберите свой город». Исключение вижу только для случая когда «Выбор города» это единственное требуемое от пользователя действие, т. е. когда мы можем сразу показывать экран выбора города.
          • 0
            Если мне сразу показывают панель выбора города, без дефолтного значения, то выбрать нужный город — один клик.
            Если мне предварительно нужно нажать «нет», то это нажатие — дополнительный и ненужный клик.
            Я, собственно, не просто так пишу — мы игрались когда-то с подобными вещами (способы введения адреса телефона, глобальный продукт с разными странами и городами) и анализировали статистику. Неудачные игры в угадайку, ведущие к дополнительным кликам, пользователей раздражают. Особенно если это не стандартный workflow («утомительно, но у всех так»), а какая-то своя выдумка.
            Оптимально, на мой взгляд, когда часто используемые варианты выносят из алфавитного списка наверх (или просто дублируют). Например, когда в списке городов Москва и Санкт-Петербург расположены первыми.
            • 0
              Вы как-раз таки сейчас описали моменты связанные со вторым вариантом, который я назвал исключением. В первом же варианте, когда «Выбор города», это не единственное требуемое от пользователя действие на конкретном экране (форме/странице), то можно говорить, что разницы по количеству кликов не будет.

              В варианте, который задели вы, когда требуется лишь «Выбор города», конечно, вместо [да / нет], лучше сразу показывать непосредственно экран выбора города, т. к. место будет позволять. И, как вы отметили, там расположить сначала небольшой список наиболее подходящих вариантов (часто используемых, авто-определённых и т. п.), а ниже уже подробный полный список.

              На счёт непривычных для пользователей сценариев, не спорю, часто раздражительны для пользователей. Я лишь про количество кликов хотел разъяснить. Но, иногда, можно новый для пользователя сценарий продумать так, что бы знакомство с ним было простым и приятным, и в таком случае это оценят положительно.
      • +1
        подобные определялки ДО того как они непосредственно понадобятся очень раздражают. Т.е. ты зашел на сайт цену посмотреть или наличие, а тебя уже засыпают вопросами кто ты и откуда
        • 0
          Вроде никто и не говорил о том, что нужно спрашивать что-либо до того как оно понадобится. Тут же обсуждают именно определение, поиск и использование каких-либо данных в формах, непосредственно в момент заполнения какой либо формы, в данном случае, в качестве примера, привели автоопределение города для более простого и быстрого заполнения соответствующего поля.
          • 0
            все верно, никто не говорил, что это нужно делать ДО того как данные понадобится, но большинство встреченных реализаций начинают у тебя это требовать задолго до актуальной потребности. и это неправильно. собственно это я и подчеркнул.
    • 0
      Может быть… Тогда 37 не смущает по тому же поводу?
      • 0
        37-й немного о другом. Там идёт речь о том, что человеку лучше представить выбор из нескольких вариантов, чем вспоминать эти варианты самому.
        • +1
          Но это же не правильно. Очевидно, что мой любимый фильм скорее всего не содержится среди 12 недавно посмотренных.
          • –1
            А причём здесь недавно просмотренные? Речь шла о том, чтобы дать людям варианты, вместо открытого вопроса. Это как сравнить экзамен основенный на тестах с вариантами ответа и на строгих вопросах — когда никаких вариантов нет. Первое облегчает жизнь и вполне применительно к дизайну интерфейсов.
            • +1
              >>>А причём здесь недавно просмотренные?
              Вообще-то, именно они предлагаются пользователю в иллюстрации к 37 тезису.
              • 0
                Это очень частный пример.
    • –1
      Как вариант можно не заполнять формы а использовать плейсхолдеры. Я думаю это и имелось ввиду
    • 0
      А я вот не соглашусь с вашим несогласием. Вы исходите из собственного удобства, а не из удобства пользователей. Такой приём не всегда спасает от ввода неверных данных. Если нет мотивации для правильного заполнения, пользователи будут тупо выбирать первый попавшийся вариант.
  • +2
    Статья классная, но после прочтения от лица пользователя, а не разработчика, оставляет ощущение что ты нечто вроде подопытной крыски.
    • 0
      Отнюдь. Якуб везде говорит, что делать всё это нужно только для удобства людей, не злоупотребляя чёрными паттернами.
      • +1
        О, да, особенно 30 и 35.
        • 0
          В тех пунктах явно говорится о том, что делать это нужно не искусственно, а когда срочность действительно есть.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Согласен. И то некоторые в поле вида 8(___)___-__-__ умудряются ввести телефон, начиная с восьмёрки. Просто не понимаю, как.
      • 0
        ctrl-c, ctrl-v
        натыкались на такое поведение на посадочных страницах, пользователь предположительно открывает 5-10 сайтов и копирует информацию в формах.
        Но опять же частный случай
    • 0
      А я вот считаю иначе. Особо извращённой формой насилия я считаю форму ввода ip-адреса в Windows.
      Кстати, а какого рода ошибки были до появления строгой формы ввода номера телефона?
      • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Половина этих пунктов не имеет отношения к юзабилити. Хорошее юзабилити помогает сделать пользователю то, что он хочет, а навязывать пользователю какие-то решения — это уже задача маркетинга.
    • 0
      Допустим, я на сайт не просто так попал, а с какой то целью, к примеру купить что либо и мне хотелось бы видеть товар, который чаще всего покупают по моему запросу, ниже по стоимости и тд, так просто приятнее на вид пользоваться ресурсом. Чтобы товары выделялись из всего списка по установленным фильтрам, сортировкам.
      И кнопка купить, была на виду. Можно долго продолжать восхвалять эти «правила».
      Мне по душе такие ресурсы, ими приятно пользоваться!
  • +2
    только я смотрю заголовки и картинки?
  • +8
    У вас очень много вещей, которые скорее беспринципный маркетинг, чем дизайн интерфейсов.
  • 0
    Когда вижу на сайте хотя бы пару пунктов из большого списка, то глаз радуется, безмерно!
    Просто хочется больше провести времени на таком сайте. :)
    Спасибо за перевод!
    В своих проектах, буду безусловно учитывать эти замечательные приемы.
    Еще раз спасибо за перевод!
  • +1
    Многие из вещей укладываются во фразу Стива Круга «Don't make me think!»
    На мой взгляд это вообще одна из основополагающих концепций при проектировании интерфейсов

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

Самое читаемое Дизайн