mega.genn.org

available in English, too!

Быть самим собой — вот что важно! 20 комментариев

Южная Гренландия

Типичный пейзаж южной части Гренландии

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

Северное сияние в Гренландии

Северное сияние в Гренландии. Фото nickrussil

Все дело в том, что мы можем судить о незнакомых объектах, только исходя из проекции накопленного нами опыта на их очевидные для наблюдателя характеристики. Будь названа описанная выше северная страна Вайсландией или даже Исландией (такая, кажется, уже есть), то опрашиваемый нами человек вспомнил бы и красивые белые айсберги, и холодный ветер, а может даже и северное сияние, но он точно не захотел бы заниматься там серфингом или лежать на пляже в одних плавках.

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

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

Между прочим, обойдя всю свою квартиру, я так и не смог найти ни одного объекта, который бы управлялся тумблером. Максимум — выключатель света. Я надеюсь, что те тумблеры, которые я помню из детства, переключающиеся с характерным железным щелчком, остались хотя бы в вертолетах или самолетах.

Как же быть, как быть? Запретить себе тебя любить?

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

Схемы из руководства пользователя Impression Computers

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

GUI и реальность

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

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

Кнопки и иконки

Попадая в удивительный мир Windows или Mac OS X (мир всяких Убунт настолько удивителен, что подразумевается по-умолчанию), пользователь, если ему дорога его информация, первым делом осознает, что файлы обозначаются иконками. Будем считать, что пользователь знает, что такое файлы и директории, которые он привык называть папками. Итак, для обозначения файлов есть иконки, для взаимодействия с ними есть всякие магические движения курсором с нажатой и ненажатой кнопкой мыши, а вот для вызова действия или его подтверждения есть кнопки. Кнопки отличаются от иконок прежде всего тем, что зачастую выглядят объемными.

Набор кнопок

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

При нажатии на кнопку она визуально нажимается, а иконка — выделяется.

Кнопка и иконка

Нажатая кнопка и выделенная иконка

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

Adobe CS3 in Finder

Иконки приложений Adobe CS3 в файловом менеджере Finder

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

Adobe CS3 in Dock

Те же иконки в доке (Dock) Mac OS X. Dock — аналог панели задач Windows

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

Adobe CS3 copying

Иконки приложений Adobe CS3 используются для большей наглядности процесса копирования

Если же пиктограммы затесались в панель инструментов, значит их тоже можно нажать один раз. Не будем вдаваться в подробности почему пиктограммы имеют право находиться в панелях инструментов в Mac OS X на тех же правах, что и кнопки. Это тема отдельного поста.

Пиктограммы в панели инструментов

Потеснив кнопки, пиктограммы расположились в панели инструментов

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

С появлением Windows 98 родились так называемые flat buttons. Они позволяли прятать границы кнопки до тех пор, пока пользователь не наведет на нее курсор. Отображалась лишь пиктограмма или подпись, или они вместе. При нажатии кнопка нажималась как обычно, но стоило убрать курсор, как она вновь становилась пиктограммой, подписью или их союзом. Если я не ошибаюсь, то эти кнопки сумели дожить до Windows Vista, но теперь обозначают практически все-на-свете-что-тут-можно-нажать-дружище.

Flat Buttons

Эволюционировав визуально, flat buttons все равно остаются пиктограммой пока на них не наведешь курсор

На заре общения с компьютером и Windows 2000 моя мама не могла приноровиться к тому сколько раз кликать по кнопке в панели задач, сколько раз на строку в меню быстрого запуска и сколько раз на иконку. Я уверен, что смутили ее именно flat buttons в броузере, которые сводили на нет все мои рассказы о кнопках и иконках ;)

У каждой задачи образ особый

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

Options

Несколько способов спросить одно и то же. Несмотря на разный внешний вид, каждый элемент состоятелен. Список опций и выпадающий список избыточны для этой настройки, но все равно понятны пользователю

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

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

, , , , , ,

Комментарии и трекбеки

8.07.08•10:34 youknowpixel

Хорошая статья.

А вообще, что касается интерфейсов (ну не в рамках этой статьи, конечно), то как-то самый удобный (вообще это конечно не правильно так называть – “самый удобный”, и подсознательно я понимаю, что это естественно не самый лучший вообще, но просто в какой-то мере очень сильно запавший мне в душу) – интерфейс духового шкафа “Электролюкс”.

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

8.07.08•10:45 Влада

По моему у Вас украли эту статью и поместили на другом сайте. Я её уже видела.

8.07.08•11:06 Genn

youknowpixel, ой-ой-ой, это же вообще отдельная тема. Вот у нас на входе в офис висят «пикалки». Подносишь к такой карточку, она пищит и дверь открывается. Раньше весели просто пластиковые коробочки с лампочкой. Лампочка светила красным, если дверь закрыта и зеленым, если открыта. Было бы круто сделать так, чтобы вся коробочка светилась мягким светом изнутри как маркеры у avelt’a, но это уже эстетика.

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

Но это просто пример глупого интерфейса, а насчет Электролюкса ключевым является вот это самое «как только разбираешься». Хотелось бы не разбираться, а сразу действовать. Благо что-то приготовить в духовке это не Шаттл запустить и не часы на видеомагнитофоне настроить ;)

Кстати, а что за модель? Мы как раз ищем духовой шкаф на кухню ;)

8.07.08•11:28 youknowpixel

Модель ELECTROLUX EOG 1733, так в инстуркции написано во всяком случае. Я сейчас вот даже не поленился и сходил на кухню и, что вообще удивительно, там оказалось даже не четыре, а три кнопки всего – то есть это даже еще один плюс к интерфейсу – мне вот сейчас даже пришлось заново “разбираться” как настроить часы (это у меня такое тестовое задание ко всем приборам электротехники) – это прошло очень быстро, в плане настройки часов Электролюкс лидирует, ничего не скажешь;)

А вот на сложные рецепты у меня пока нет времени, кто знает, может там-то как раз интерфес и подведет это чудесную итальянскую компанию;)

8.07.08•11:54 marm

О! А я хотела как раз раcспросить про модель духового шкафа!

8.07.08•12:31 UncleSam

Гена, я тупой в плане дизайна, сам знаешь, но один вопрос меня сильно мучит: зачем ты копировал Фотошоп?

8.07.08•14:51 Genn

UncleSam, вообще-то мне не нравится когда приложения в директории Applications лежат во вложенных директориях. Кроме того этого наглядно ;)

11.07.08•04:05 Сева

Очень интересная статья! Расскакжите поподробнее про данную модель!

12.07.08•17:54 valodka

Кстати, тумблер имеются на задней стенке системного блока и служит для управления блоком питания. В инструкции из примера он нигде не обозначен.

12.07.08•23:55 Genn

valodka, на их компьютерах, к счастью, нет такого выключателя ;)

13.07.08•17:22 defosa

)) на моём есть!

14.07.08•07:14 Сергей

Отличная статья.Давно такие не попадались.

27.08.08•20:45 Роберт

Спасибо автору за интересные новости и сообщения, занес блог в favorits ;)

2.09.08•13:32 peroksid

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

2.09.08•13:40 Genn

peroksid, там даже есть фотография со спутника. Не смотря на наличие зеленых областей, сложно сказать, что это та страна, что описана в первом абзаце поста ;)

2.09.08•13:50 peroksid

10 градусов в июле не диснеевские пляжи, но не северным сияньем жив гренландский человек.

2.09.08•14:00 Genn

Обязательно оценю, когда побываю в этой удивительной стране ;)

12.09.08•09:44 Антон

Хай, прикольный у тебя ресурс! Продолжай развивать!

9.06.09•16:13 Валентин Шергин

С нетерпением жду статью на тему почему пиктограммы имеют право находиться в панелях инструментов в Mac OS X на тех же правах, что и кнопки.
Спасибо!

9.06.09•19:46 Genn

Валентин Шергин, спасибо, что напомнили о данном обещании. Занес в список обязательных дел ;)

Оставить комментарий

имя и адрес электронной почты — необходимые поля

Комментировать

Свежие твитты

Другие сайты и сети