Пользователь
0,0
рейтинг
16 марта 2010 в 09:29

Дизайн → Якоб Нильсен :: Близость действий и объектов в дизайне интерфейсов



Мой первый перевод статьи в принципе, не судите строго.

Близость действий и объектов в дизайне интерфейсов



Саммари:

Пользователь не пользуется возможностями интерфейса, если элементы – кнопки и чекбоксы – слишком далеки от объектов, над которыми они производят какие-либо действия.



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

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

В case study об электронной коммерции, к примеру, пользователи часто не обращают внимания на товары, показанные в отличных от привычного размерах или цветах.

Как iTunes нарушает правило близости


Поразительный пример этого можно привести, посмотрев на окно Apple iTunes, предлагающее обновить приложения для iPhone. Через несколько месяцев после покупки iPhone я все думал, что пользователям нужно каждый раз проверять иконки приложений вручную.

Вот как это выглядит:



Вверху окна расположена куча иконок. В самом низу окна есть кнопка с надписью «Доступно 1 обновление». Эта кнопка обновляет приложения, именно те, для которых обновления доступны.
Но несколько месяцев я не замечал этой кнопки, только лишь потому, что она слишком далеко от тех объектов, за которые она отвечает.

Более того, эта кнопка расположена на полосе другого цвета, поэтому кажется, будто она находится вне области иконок.

(Между прочим, почему окно ITunes на моем скриншоте такое большое, если в нем расположено так мало иконок? Потому что одна и та же программа управляет приложениями и коллекцией музыки. Когда вы работаете с несколькими сотнями записей, вам нужно много пространства. Не всегда хорошо выполнять настолько разные операции в одном и том же интерфейсе.)

Кнопки рядом vs. кнопки далеко


Интересно то, что iTunes показывает правильное расположение кнопок в другой части того же интерфейса:



На этом скриншоте кнопка «Обновить» справа от иконки, на которую она влияет. Риска не заметить ее нет. И нет вопросов типа «а что мне делать?». (Грустно то, что до кнопки «Готово» примерно столько же, сколько до Сибири. Фактически, проблема в том, что это окно использует диалоговые области в роли диалоговых блоков).

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

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

Во-вторых, проблема юзабилити может показаться не такой плохой в тестах самой Apple:
— Если тестируется окно меньшего размера, кнопка должна быть ближе к иконке и останется незамеченной с меньшей долей вероятности. (Меньший размер окна может принести результаты на мониторах средних размеров или в изолированных тестах, т.е. в таких, где, например, пользователь не будет работать с большим рабочим пространством для того, чтобы уместить всю свою коллекцию музыки.)

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

Этот случай иллюстрирует сохраняющуюся важность старых и проверенных интерфейсов: понимание того, что было открыто несколько лет назад, напомнит о себе, если вы забудете об этом. Неправильно расположенная кнопка в iTunes также показывает важность тестирования выборочных данных.

Источник: www.useit.com/alertbox/action-object-closeness.html
Кирилл Зима @newa
карма
35,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • –17
    это же какой экран надо иметь!
    p.s.
    я то думаю почему AppStore так популярен — все ясно они не прислушиваются к советам Якоба Нильсена
    • +17
      Ничего подобного, AppStore так популярен, потому, что у пользователей Apple нет альтернативы.
      • 0
        только вот AppStore является одним из плюсов iPhone. А именно эти плюсы помогают сделать свой выбор. Но я согласен, что несколько не удобно, хотя не понимаю зачем разворачивать айтюнс на весь экран.
        • 0
          К примеру я его разворачиваю на весь экран потому, что так удобнее со списком музыки работать.
          Вопрос не в том, что они делают плохо, а в том, что можно было бы лучше, я думаю.
          • 0
            Ну да, если бы они улучшили свое юзабилити, многие постоянные пользователи AppStore с удивлением открыли бы для себя много «новых» функций :)
            • 0
              Вооот! Об этом и идет речь.
              Или, может, стоит их всех пересадить за 17-ти дюймовые мониторы с 24 дюймов и они сразу увидят нужные кнопки.
              • НЛО прилетело и опубликовало эту надпись здесь
                • +1
                  я подумаю насчет конкретных кейсов по веб-юзабилити, если компания будет не против — можно будет сделать, благо информации достаточно.
          • 0
            я никогда на весь экран не разворачиваю, у меня к 13" букку подключен еще 26" дисплей. на нем у меня рсс, волна,zoho projects, quicktime, айтюнс же большую часть свернут или в режими мини плеера. на 13" с ним вполне удобно работать. на 26" уже нет, и с этим ничего не сделать, экран просто не для того, чтобы на него полностью разворачивать такие вещи как айтюнс :)
        • +1
          Да там же в скобках написано, именно почему он так делает. Читайте внимательнее.
    • 0
      Нормальный 24-дюймовый экран.

      А у бедных сектантов нет другого выхода. Да им и не нужно. Благословление фюрера джопса автоматически делает все юзабельным.
  • 0
    У меня 21 дюйм, и выглядит все примерно так же.
    Насчет AppStore — уверен, количество проведенных обновлений и продаж существенно возрасло бы, придерживайся они описанного в статье правила.
  • +2
    С одной стороны, что говорит Якоб правильно, но с другой стороны не вижу чтобы он предложил вариант решения. Дело в том, что в жизни нет абсолютно черного и абсолютно белого. Смещение данных пунктов куда-либо вызвало бы куда большие вопросы. К тому, что Якоб в течении нескольких месяцев не замечал его, скажу что работая хоть какое-то время с Mac OS, я допустим как пользователь непроизвольно разделяю облать на три горизонтальные линии: верхняя, чаще всего статусная и содержащая элементы управления над действиями которые выполняет ПО, средняя как найболее тактильная к позиционированию глаз, содержит основной контент, те сущности с которыми оперирует ПО, третяя и самая нижняя (самая малозаметная) содержащя блог либо информацию об управлении (удаление, добавление, редактирование и т.д.), отображении сущностей находящихся на второй линии. Так, видимо я не так расматриваю UI и просматривая список установленных приложений по иконкам, мой взгляд непроизвольно для дополнительной информацией сполз вниз руководствуясь общим шаблонов построения UI для ПО присутствующем в Mac OS X.

    Вклад Якоба в облать пользовательских интерфесов конечно велик и не стоит ни в коем сравнении с моим, но при критике и вынесении ошибок хотелось бы видеть способы устранения, потому как вариант у вас, извините тут ошибка, но как ее избежать я сам не знаю. Что напоминает еще раз (мне самому) что общие шаблоны и рекомендации на то они и общие чтобы уметь их гнуть и изгибать согласно пребованию продукта. Таким образом хочу сказать, что да есть такое дело и такая погрешность о которой говорит Якоб, но в данном контексте она что называется «приемлема».!
    • 0
      В плане одного приложения — можно было бы рисовать оверлей на иконке, что доступно обновление (правда я не знаю используется ли в Mac OS вообще такое), а вот для обновления сразу всех приложений — не знаю. Возможно предлагать обновить все приложения, если пользователь начал обновлять хотя бы одно из них

      Как-то так
    • 0
      Решение, эта полоска должна быть сверху, кнопка обновить должна выравниваться по левому краю.
      Почему, потому что верхний левый угол самая «горячая» зона и именно там глаз ищет информацию, если взять интерфейс то слева и сверху находятся все управляющие и навигационные элементы, поэтом логично разместить что-то что увидит пользователь там где он буде это искать.
  • +2
    кто нибудь может порекомендовать книжки по usability и ui англоязычные? с примерами, а не с 99% текста непонятно о чем или банальщины.
    • +2
      Jef Raskin — The Humane Interface: New Directions for Designing Interactive Systems.
      • 0
        Очень толковая книга кстати. Тоже советую. Еще вроде как был русскоязычный перевод, но лучше всего имхо читать в оригинале.
        • 0
          Практически всегда лучше читать в оригинале.
          Спасибо за совет, кстати.
  • 0
    Грустно то, что до кнопки «Готово» примерно столько же, сколько до Сибири
    это так в оригинале? :)
    • 0
      Sadly, the dialog area's Done button might as well be in Siberia.
    • +1
      да, так, почти. «Done button might as well be in Siberia» — вполне могла бы быть в Сибири. Только для них Сибирь находится гораздо дальше, чем для нас :)
    • 0
      Да, почти так. Меня уже опередили с ответом.
      • 0
        меня тоже)
        • +1
          я не виноват)
          • 0
            я Вас и не виню, просто констатировал факт :)
  • 0
    интересно, а какой процент пользователей обновляет приложения через айтюнс?
    • 0
      я думаю многие из тех, кто использует apple и живет на западе.
  • +3
    простите за вопрос не в тему: какой шрифт был использован для изображения вначале топика?
    • –2
      Без засечек :)
      • –3
        Минусюки, вы где засечки там узрели? :))
        • +1
          минусовали не за отсутствие засечек, а за неуместный юмор.
          это я вам как полиграфист говорю ;)
    • +1
      PT Sans, бесплатный, качается отсюда: www.paratype.com/public/
      • 0
        благодарствую :)
  • 0
    Как по мне — кнопка в нижнем правом углу могла бы там и оставаться (первый скриншот). Достаточно просто сделать её немного заметнее, подсветить, чтобы она больше походила на кнопку. Тогда будет заметно проще.

    Кнопка «Done» расположена привычно справа внизу (как принято для большей части диалоговых окон к примеру в windows), но я бы поместил её в тот же фрэйм, и этого на мой взгляд было бы достаточно.

    Дело же не только в растоянии, но и в привычном интерфейсе. Разве нет?
  • +1
    Дело ещё в том, что пользователи макоси не разворачивают окна на весь экран.
    • 0
      Не совсем знаком со спецификой макоси, видимо. Почему не разворачивают?
      • +1
        Затрудняюсь сказать. Это просто не нужно что-ли.
  • 0
    Еще раз убедился в том, что переводы нужны в основном только для того, чтобы служить стимулом для изучения английского и прочтения оригиналов.
    • 0
      Хреновый перевод? :(
      • 0
        Один из старейших принципов взаимодействия компьютера с человеком гласит, что те элементы, расположенные рядом связаны.

        Перевод передает смысл статьи, но еще далек от адаптированного (оптимального).
        Не бойтесь пробовать и практиковаться — Вам зачтется. + Вам за это ;)
        • 0
          Жду следующей статьи Нильсена чтобы перевести лучше ;)
          А вам — спасибо. Мой первый перевод.
  • 0
    А я смотрю на лейбл рядом с Applications, чтобы узнать количество и наличие апдейтов

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