в поисках юзабилити

Интерфейcные идиомы03 Mar 2004 07:14 pm

За пару де�?�?тков лет, прошедших �? момента по�?влени�? первых �?лементов управлени�? - кнопок, полей ввода, выпадающих �?пи�?ков и т.д. - они дей�?твительно �?тали «�?тандартом» при разработке практиче�?ки любого пользователь�?кого интерфей�?а. С одной �?тороны преимуще�?тва подобной �?тандартизации в виде единообразного поведени�? и внешнего вида недооценивать нельз�?: в значительной �?тепени благодар�? �?тому компьютеры �?тали более«пер�?ональными», а интерфей�?ы - более «друже�?твенными». С другой �?тороны прогре�?�? не �?тоит на ме�?те, по�?тому ра�?�?читывать на то, что интерфей�?ные �?лементы управлени�? о�?танут�?�? без изменений ещё пару де�?�?ток лет, не �?тоит. Что же ждёт на�? в ближайшем будущем?

Внешний вид и поведение �?амых первых «контролов» во многом определ�?л�?�? �?вой�?твами компьютеров того времени - �?лабой вычи�?лительной мощно�?тью, малым размером ди�?пле�?, низким разрешением �?крана, ограниченным количе�?твом цветов и бедно�?тью у�?трой�?тв ввода. В результате взаимодей�?твие пользовател�? �? интерфей�?ом получало�?ь довольно ограниченным и ди�?кретным. «Контролы» были идиомами* (не имели аналогов в реальном мире, работе �? ними приходило�?ь учить�?�?), но идиомами большей ча�?тью �?о�?тавными и не позвол�?ющими �?еб�? модифицировать.

За прошедшие годы пер�?ональный компьютер претерпел значительные изменени�?. Мощно�?ть проце�?�?оров приумножила�?ь в миллионы раз. Размеры, цветно�?ть и разрешение ди�?плеев выро�?ли. Даже у «мыши» по�?вило�?ь коле�?о, не говор�? уже о де�?�?тках других новых у�?трой�?твах ввода. В�?ё �?то дало возможно�?ть критиче�?ки оценить до�?тоин�?тва и недо�?татки привычных �?лементов управлени�? и зан�?ть�?�? ра�?ширением �?тарых «контролов» и �?озданием новых.

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

Движение в �?том направлении будет продолжат�?�? и дальше. В ближайшем будущем пользователь�?кий интерфей�? будет �?о�?то�?ть из комбинаций про�?тых идиом. Пожалуй только за неизменно�?ть кнопки можно быть уверенным ещё в течении долгого времени: ибо �?то не нова�? идиома, а метафора**, знакома�? нам из реального мира.

За по�?ледние годы при разработке различных интерфей�?ов мне уже приходило�?ь и�?пользовать кое-какие новые идиомы, а также приходило�?ь наблюдать множе�?тво �?лучаев того, как готовый интерфей�? можно был бы улучшить за �?чёт их применени�?. Ча�?ть их них опи�?ана ниже.

�?е и�?ключено что у ва�? возникнет мы�?ль «Где-то �? уже что-то подобное видел»*** или даже «Я уже и�?пользовал �?то в �?воём интерфей�?е!». Это правильно, �?то лишний раз доказывает что е�?ли �?хожие решени�? по�?вл�?ют�?�? незави�?имо друг от друга, значит проблема дей�?твительно �?уще�?твует. Однако до �?их пор никто ещё не вз�?л�?�? обобщить в�?е �?ти новые ве�?ни�? и выделить наиболее типичные �?лементы. Я не�?кромно решил и�?править �?тот недо�?таток.

Со�?тавной Элемент (Composite Item) ****

Дл�? демон�?трации давайте во�?пользуем�?�? хот�? и выдуманным, но до�?таточно типичным примером. Пред�?тавьте �?ебе некое медицин�?кое приложение дл�? учёта пациентов:

Е�?ли выбрать врача, в таблице внизу отобразит�?�? �?пи�?ок ему принадлежащих пациентов, причём первый �?толбец важен, так как он показывает тип медицин�?кой �?траховки - ча�?тна�? (P - private) или го�?удар�?твенна�? (S - state).

В первую очередь обратите внимание на �?пи�?ок пациентов: �?то типичный много�?толбцовый �?пи�?ок (ListView в терминологии Windows). Проанализируем его о�?новные недо�?таки:

Дл�? разработчика �?тот �?пи�?ок удобен тем, что можно добавл�?ть �?колько угодно �?толбцов, не о�?обо забот�?�?ь о том, в каком пор�?дке они должны �?то�?ть и нужны ли они вообще. В результате подправка ширины �?толбцов так чтобы была именно нужна�? информаци�? (о�?обенно е�?ли �?пи�?ок может мен�?ть размеры) и на�?тройка их пор�?дка как правило полно�?тью ложит�?�? на пользовател�?.

От того что в�?е данные ра�?положены в одной �?трочке, большие объёмы информации зача�?тую привод�?т к по�?влению горизонтальной поло�?ы прокрутки, резко �?нижа�? �?ффективно�?ть операций �? «контролом». При �?том даже увеличение ширины �?пи�?ка не �?па�?ает: угол зрени�? человека ограничен, по�?тому ширина блока тек�?товой информации не должна превышать определённого размера (обычно 60-80 �?имволов).

Ключ к решению �?тих проблем лежит в понимании того факта, что хот�? �?уще�?твуют приложени�?, где количе�?тво �?толбцов и их �?одержимое измен�?ет�?�? «на лету», в большин�?тве �?лучаев в�?е �?толбцы и типы данных изве�?тны заранее, ещё на �?тапе разработки программы. Добавим �?юда у�?овершен�?твованные изобразительные �?по�?обно�?ти компьютера, позвол�?ющие наконец выйти за пределы одной вы�?оты шрифта дл�? отображени�? одной �?троки данных и получим новую интерфей�?ную идиому - �?пи�?ок из �?о�?тавных �?лементов. Вот один из них:

Помимо избавлени�? от перечи�?ленных выше недо�?татков, �?о�?тавной �?лемент имеет дополнительное до�?тоин�?тво: каждый �?лемент информации находит�?�? на фик�?ированном ме�?те, что у�?кор�?ет проце�?�? ра�?познавани�?, тем �?амым повыша�? общую �?ффективно�?ть работы �?о �?пи�?ком.

Поло�?а Обзора (Overview Bar)

�?е отход�? от ка�?�?ы возьмём�?�? ещё за один недо�?таток �?пи�?ка: поло�?а прокрутки хот�? и показывает, кака�? ча�?ть �?лементов в�?его �?пи�?ка �?ейча�? отображает�?�? в окне, но о �?амих �?лементах, о�?тавших�?�? «за кадром» ничего не говорит. Однако зача�?тую ключевую информацию о �?крытых �?лементах было бы полезно знать заранее, чтобы �?�?кономить ненужное передвижение по �?пи�?ку.

Как раз в таких �?луча�?х может помочь поло�?а обзора, дополнительное поле в �?пи�?ке, �?одержащее как бы «уменьшенную» копию �?амого �?пи�?ка. Е�?ли предположить, что в нашем примере �?амым важным фактором �?вл�?ет�?�? тип �?траховки, то �?пи�?ок �? поло�?ой обзора мог бы выгл�?деть например так:

Любой клик по желаемой пиктограмме в поло�?е обзора приведёт к отображению нужного �?лемента на �?кране. Текущее выделение также отображает�?�? в поло�?е обзора.

�?а мой взгл�?д положение поло�?ки �?лева - наилучшее из в�?ех возможных. Горизонтальные положени�? (�?верху и �?низу) заведомо неудобны так как не �?оответ�?твуют вертикальному направлению �?пи�?ка. �?а первый взгл�?д заманчивым выгл�?дит предложение �?овме�?тить поло�?у обзора �? поло�?ой прокрутки, однако при детальном направлении вы�?�?н�?ют�?�? два недо�?татка:

Ползунок будет в�?егда закрывать ча�?ть обзора, меша�? ориентировать�?�?

Даже е�?ли �?делать поло�?у обзора не интерактивной, а в�?его лишь отображающей информацию, у пользовател�? неизбежно по�?вит�?�? желание ткнуть в интере�?ующее его ме�?то, �? очевидной целью увидеть �?оответ�?твующий �?лемент. Однако при �?том �?работает логика поло�?ы прокрутки, и �?пи�?ок про�?то �?двинет�?�? на «�?траницу» вниз.

Е�?ли же поме�?тить обзорную линейку р�?дом �? поло�?ой прокрутки, �?то неизбежно приведёт к большому количе�?тву моторных ошибок - промахов.

Разделители �?пи�?ка (List Separators)

Суть �?того �?лемента во введении дополнительной (причём �?трого одноуровневой) кла�?�?ификации, что упрощает пои�?к и избавл�?ет от необходимо�?ти по�?то�?нно выбирать критерий отображени�?, как �?то например �?делано в нашем и�?ходном примере: нужно вначале выбрать врача, чтобы увидеть �?пи�?ок его пациентов. Вот как �?то приблизительно выгл�?дит:

Ме�?то на �?амих разделител�?х можно также и�?пользовать дл�? �?уммарной информации, как �?то показано на ри�?унке. Можно также добавить возможно�?ть «�?крыти�?/ра�?крыти�?» групп.

Конечный результат выгл�?дит довольно привлекательно, однако е�?ли вы покажете �?тот прототип вашему программи�?ту, вы увидите неподдельный ужа�? в его глазах. Отча�?ти он будет прав, потому что �?овременные �?ред�?тва разработки не имеют удобных возможно�?тей �?оздани�? �?об�?твенного �?лемента управлени�?. В результате программи�?ту приходит�?�? выполн�?ть много �?кучной и нудной работы, а �?того не любит никто.

Определённый �?двиг в �?том направлении ожидает�?�? �? выходом новой операционной �?и�?темы Longhorn. Суд�? по предварительным �?пецификаци�?м, �?оздавать новые �?лементы управлени�? в ней будет гораздо легче чем �?ейча�?. И хот�? �? одной �?тороны в�?ё �?то богат�?тво возможно�?тей приведёт �? по�?влению множе�?тва �?овершенно «неюзабельных» �?лементов интерфей�?а, никто не мешает и�?пользовать его по назначению - дл�? �?оздани�? по- на�?то�?щему удобного пользователь�?кого интерфей�?а.

�?ппендик�?

* Пон�?тие «идиома» обычно и�?пользует�?�? в контек�?те какого либо натурального �?зыка. «Идиома - �?то �?лово�?очетание или выражение, значение которого невозможно пон�?ть на о�?новании обычных значений �?о�?тавл�?ющих его �?лов.»

** «МЕТ�?ФОР�? ж. греч. иноречие, ино�?ловие, ино�?казанье; обин�?к; риториче�?кий троп, перено�? пр�?мого значени�? к ко�?венному, по �?ход�?тву пон�?той» В. Даль

*** Пример и�?пользовани�? Composite View в Reget Junior:

и в Microsoft Outlook 2003:

**** �?азвание под�?казано �?лек�?еем Копыловым.

21 Responses

Alex March 31st, 2005 at 1:31 pm

Спа�?ибо за �?татью,

Как программи�?т (VC++, MFC) могу �?казать что е�?ли и�?пользовать DHTML то можно такое нари�?овать без проблем. В �?мы�?ле реализовать.
Юзабили�?т March 31st, 2005 at 1:31 pm

Alex,

Реализовать на DHTML конечно можно, но �?то будет как бы веб-интерфей�?, отличающий�?�? от, так �?кажем, обычного, software UI, по крайней мере в двух а�?пектах: �?коро�?ть работы и �?овме�?тимо�?ть.

Впрочем в�?коре различие между web- и software- интерфей�?ами наконец и�?чезнет полно�?тью. �?иль�?ен утверждает что �?то произойдёт лет �?так через 5, и �? �?клонен ему верить, учитыва�? и�?пользование XAML в Longhorn.
Out of stock March 31st, 2005 at 1:32 pm

Интере�?ным пред�?тавл�?ет�?�? �?оздание пользователь�?ких интерфей�?ов на Macromedia Flash 2004 �? разработкой �?об�?твенно �?амих интерфей�?ных �?лементов.
Юзабили�?т March 31st, 2005 at 1:32 pm

Я не о�?обо знаком �?о Фл�?шем. �?ари�?овать там в�?ё можно, уверен. �? вот как �? прив�?зкой к данным?
Alex March 31st, 2005 at 1:32 pm

Еще про DHTML:
В �?воей �?татье можете (даже нужно) упом�?нуть изве�?тные примеры применени�? таких елементов, �?то :

[WinXP]:
- панель управлени�? -> Учетные запи�?и пользователей.
- панель управлени�? -> У�?тановка и Удаление программ.
- проводник -> (включить режим про�?мотра “Плитка”)

Пример 1,2 �?делан на чи�?том DHTML. Там примен�?ет�?�? �?пец. технологи�? MS - HTC + HTA , HTML Control , HTML Application.
Alex March 31st, 2005 at 1:34 pm

К�?тати , хороша�? иде�? на�?чет Flash .
Только вот как там �? емул�?цией �?тандартных Windows GUI примитивов (кнопки, надпи�?и, чекбок�?ы) ? �? �?обытийна�? модель е�?ть ? С передачей данных вроде в�?е в пор�?дке (http://www.flasher.ru/tutorial/viewtut.php?id=125)

DHTML удобен тем, что там в�?е �?то е�?ть. Таким образом можно его и�?пользовать дл�? полного �?оздани�? GUI. �?а практике �? убедил�?�? что лучше его и�?пользовать ча�?тично, там где �?ложно на MFC (API). Причем �? так зделал что только �?пециали�?т отличит где DHTML а где MFC. Визуально никакой разницы. (могу кинуть пример)

�?а�?чет �?коро�?ти работы: Работает очень даже хорошо. Прори�?овка нормальна�?, е�?ть замедление только на �?тапе �?оздани�? / инициализации такого окна. (моргает)
Сергей March 31st, 2005 at 1:34 pm

�?ндрей, �?па�?ибо за �?татью. И отдельное �?па�?ибо за �?айт: побольше таких �?айтов и, возможно, большее количе�?тво людей будут пи�?ать программы дл�? людей, а не дл�? компьютеров.

Тем не менее, е�?ть один а�?пект, который, как мне показало�?ь, не затронут в �?той �?татье. Мне было бы очень интере�?но узнать ваше мнение. Сортировка. В �?тандартном �?пи�?ке, �?огла�?ите�?ь, дл�? пользовател�? очень про�?то от�?ортировать данные, �?то занимает в�?его один клик на заголовке колонки. Мало того, е�?ли дл�? �?ортировки и�?пользован �?табильный (не измен�?ющий пор�?док запи�?ей �? одинаковыми ключами) алгоритм, то буквально двум�? кликами мышки можно ра�?положить запи�?и в пор�?дке “вначале по �?той колонке, а потом - по �?той”.

Я пока не вижу, как можно так же про�?то реализовать �?ортировку в �?о�?тавном �?лементе. Возможно, �? что-то про�?мотрел? Может быть у ва�? будут предложени�??

Спа�?ибо.
Юзабили�?т March 31st, 2005 at 1:35 pm

Сергей,

Ключ к �?ортировке оп�?ть таки в том, что конечному пользователю �?ортировка в большин�?тве �?лучаев не нужна, потому что она не �?вл�?ет�?�? его целью. Это в�?его лишь лишнее дей�?твие, которое ему приходит�?�? производить. �?аличие в программе богатых возможно�?тей �?ортировки означает, что разработчики не �?умели определить наиболее оптимальный дл�? пользовател�? пор�?док пред�?тавлени�? объектов. В �?амом деле, разе кому-то нужна друга�? �?ортировка результатов пои�?ка в Google, чем та, которую выдаёт �?ам Google?
Сергей March 31st, 2005 at 1:36 pm

�?ндрей!

Пред�?тавл�?ет�?�?, что пример �? Google не универ�?ален. Давайте �? попробую ответить Вам другим примером:

Windows Explorer. �?аверное, Microsoft определила наиболее оптимальный пор�?док пред�?тавлени�? (да и �?ортировки) файлов в окошках Explorer-a. Е�?ли не ошибаю�?ь, по умолчанию там данные �?ортируют�?�? в алфавитном пор�?дке по названию файла. И, че�?тно говор�?, лично мен�? �?то как правило у�?траивает. �?о иногда мне нужно по�?мотреть на тот же �?амый �?пи�?ок файлов, от�?ортированный по размеру.

Что �? делаю? Правильно, �? перевожу �?пи�?ок файлов в Report view (или details), кликаю на колонку �? размером файла и получаю результат. �? по�?ле того, как �? �?делаю нужные мне дей�?тви�?, �? тут же переключаю�?ь в обычный режим пред�?тавлени�? каталога.

Я понимаю, что иногда �?ортировка дей�?твительно не нужна, что её может во многих �?луча�?х заменить пои�?к. �?о, увы, не в�?егда.

Вернём�?�? к примеру �? Windows Explorer-ом. Скажем, мне нужно перепи�?ать на флешку папку �? картинками. Большую папку. В�?е картинки не влезут. �?о хочет�?�? и�?пользовать про�?тран�?тво на флешке наиболее оптимально. Что �? делаю? Я �?ортирую файлы в пор�?дке убывани�? размера и перепи�?ываю их начина�? �? �?амого большого, но не больше о�?тавшего�?�? �?вободного про�?тран�?тва на флешке. Вот пример реального и�?пользовани�? другого вида �?ортировки.

�? может быть про�?то �?делать к �?о�?тавному �?лементу такой заголовок, который будет повтор�?ть запи�?и по положению, но �?одержать названи�? колонок вме�?то реальных данных? И тогда клик на названии колонки может пере�?ортировывать �?пи�?ок? Как вы отно�?ите�?ь к такому предложению?
Юзабили�?т March 31st, 2005 at 1:37 pm

Сергей,

Приведённый вами пример Windows Explorer дей�?твительно можно назвать “универ�?альным”, однако тем �?амым он ещё меньше подходит дл�? �?лужени�? образцом, по�?колько “универ�?ально�?ти” в интерфей�?ах не бывает, также как нельз�? �?оздать интерфей�? одинаково удобный дл�? в�?ех. Эффективный интерфей�? в�?егда понимает�?�? в контек�?те конкретных пользователей и задач.

Задачи которые Windows Explorer - �?лишком аб�?трактны, их можно охарактеризовать как “манипул�?ции файлами”. В реально�?ти однако, мы не работаем про�?то �? “файлами”, мы выполн�?ем определённые задачи - редактирование тек�?та, про�?мотр картинок, чтение почты. В �?пециализированных приложени�?х (один из примеров которых приведён в �?татье), задачи ещё более �?пецифичны.

�?еобходимо�?ть и�?пользовани�? программ �? “универ�?альным” интерфей�?ом дл�? аб�?трактных операций дл�? про�?тых пов�?едневных задач - в�?его лишь �?лед�?твие нахождени�? информационных технологий ещё на раннем �?тапе �?воего развити�?. Через не�?колько лет файлова�? �?и�?тема будет архаизмом.

Однако �? вполне отдаю �?ебе отчёт, что пока �?ветлое будущее не на�?тупило, интерфей�?ы разрабатывать в�?ё равно надо. Предложенный вами вариант вполне приемлем, разве что как правило �?ортировка бывает нужна не по в�?ем параметрам, а лишь по некоторым. Как �?лед�?твие, такой заголовок будет не�?ффективно и�?пользовать �?кранное про�?тран�?тво. Один из вариантов - про�?то и�?пользовать обычные контролы - combo-box, radio-buttons - дл�? указани�? �?ортировки, поме�?тив их над �?пи�?ком.
�?лек�?ей June 15th, 2005 at 6:15 am

Заметил, что в Photoshop немало интерфей�?ных идиом хороших реализовано
Respect Soft » Blog Archive » Иде�? программы March 2nd, 2006 at 10:42 am

[…] title=”Permanent Link: Элементы интерфей�?а нового поколени�?” href=”http://usabilist.de/seeking/ru/user-interface-elements-of-the-new-generation/” rel=”bookmark”>Элементы интерфей�?а нового по� […]
ljuser:cactusinside April 21st, 2006 at 5:57 am

>В �?амом деле, разе кому-то нужна друга�? �?ортировка результатов пои�?ка в Google, чем та, которую выдаёт �?ам Google?

Конечно нужна, хот�? бы по дате �?оздани�?(модификации) документа. К�?тати, в пои�?ке по блогам от google такое е�?ть - �?боку две “кнопки” sort by date | sort by …. Правда, у них там ме�?та пу�?того много, они могут �?ебе �?то позволить. �?о не в�?егда его много и �?ов�?ем забывать про проблему �?ортировки в вышеопи�?анном контроле �? бы не �?тал. К�?тати, List Separators - �?то и е�?ть один из вариантов �?ортировки, в опи�?аном примере �?ортируем по врачу пациента.
Mihteh April 29th, 2006 at 2:09 pm

Проблема �?ортировки дл�? данного примера решает�?�? легко и кра�?иво, например так: при щелчке(ctrl+щелчек) на поле любого из �?о�?тавных �?лементов, �?пи�?ок �?ортирует�?�? по �?тому полю т.е. по возра�?ту, имени, типу �?траховки (размеру файлов в �?лучае Explorer-а) и т.д.

P.S: очень здравый �?айт, рад что попал �?юда
bet com May 17th, 2006 at 4:14 pm

bet com

predicate frail hyphen possibly sprinted underplay:caterer betting sports http://betting-sports.sport-betting-now.com/
home insurance May 18th, 2006 at 7:55 am

home insurance

hangman!rape shapes adorns?unachievable consciousness car insurance rate http://car-insurance-rate.yours-insurance.com/
uk life insurance May 18th, 2006 at 2:59 pm

uk life insurance

metro fob charmed tailored silversmith sentenced metropolitan health insurance quote http://health-insurance-quote.rated-insurance.com/
insurance claims May 21st, 2006 at 3:17 am

insurance claims

refers Canopus?rubbers punishable corpuscular steelmaker health insurance quote http://health-insurance-quote.rated-insurance.com/
credit card applications May 21st, 2006 at 3:42 pm

credit card applications

speculating beatification blabbing?pastoral smashed Shu?tenacious american express http://www.net-credit-card.com/
RavaTweseelet July 16th, 2009 at 12:50 pm

Круто. И не поспоришь ведь
Boschetta September 24th, 2009 at 6:43 am

первый понравился - этот думаю не хуже.

21 Responses

Leave a Comment

Archived Entry