Рибъна
От няколко години Майкрософт проектират новата версия на техния популярен пакет с програми Microsoft Office. Преди?ната бе?е Office 2003, новата доскоро се крие?е зад тривиалното Office 12, но явно за да се подчинят на традицията от компанията ре?иха в крайна сметка да бъде атрактивното Office 2007.
нтересното в новия Офис е преди всичко радикално промененият потребителски интерфейс. Вече ги няма хилядите ленти с инструменти, които се показват и скриват неизвестно как, няма ги типичните менюта File, Edit, View… Всичко изглежда някак по-празно, просто и изчистено.
Но възможностите на отделните програми не са орязани. Всяка програма от Офис пакета има хиляди възможности, настройки, дизалози и т.н., и всички те са си в новата версия. Разликата е в това, че са направени по-лесно достъпни и откриваеми.
Една от отличителните черти на новия интерфейс е т.нар. лента, панделка или както там се превежда ribbon (всъщност официалното маркетингово название е Command Tabs – още по трудна за смислен превод фраза; нека бъде „командни табове” засега).
Продуктовият мениджър и отговорник за потребителския интерфейс на Office 12 Дженсен Харис обяснява достатъчно добре на своя блог за какво служи тази панделка и защо е толкова хитро изобретение и затова няма да преразказвам нищо.
Накратко философията на Майкрософт за новия офис е да оставят възможно най-много пространство за онова, върху което се труди човек – било то Word документ, таблица в Excel или презентация в PowerPoint, докато всички други части от интерфейса, свързани с оформянето/настройването на съдържанието, да се показват само тогава, когато изникне нужда от тях в хода на работата на потребителя.
Пример: сега, когато вмъкне? картинка в Word се показва Image toolbar-а, който ти дава възможност да прави? разни неща с картинката; когато вмъкне? таблица в документа се показва Table Toolbar-a. Но когато вече си свър?ил работата си с картинките и таблиците в документа си тези тулбарове си остават отворени. Остават отворени дори и когато започне? работа с нов документ. В крайна сметка екранът ти се затлачва с десетките тулбарове и таскпанели и някъде там в средата остава едно малко правоъгълниче с документа, върху който в крайна сметка работи?. (позната гледка и за онези, които се занимават с Flash разработка).
Стархотните хорица от 37signals имат едно понятие – „епицентър на дизайна”. Общо взето то е подход към дизайна на всеки екран от дадено приложение, при който проектантът се опитва да открие кое е най-важното нещо за един екран. Щом го открие, той трябва да се постарае да навърже останалите елементи (навигация, картинки, маркетингови брътвежи) около него така, че всичко да служи на основния елемент (който е всъщност епицентърът на цялото нещо) а не обратното. Обратното е да има? най-различни елементи – лого, навигация, банери, с тях да направи? една рамка и в останлото място да излее? специфичната за този екран информация/функционалност. Горният пост в блога им и един наскоро?ен пример, който направиха разясняват доста добре какво значи епицентър дизайн.
Разбира се пи?а всичко това само, за да обясня откъде дойде идеята за един от най-сложните интерфейси, които ми се е налагало да правя.
В интерфейса на системата за управление на повече от дузината сайтове, които разработваме за Уеб медия груп (УМГ) има изобилие от възможности за настройка, процеси от по няколко стъпки, диалози система – потребител. Въобще всички онези всевъзможни неща, които обикновено стъжняват живота на хората, които ще използват дадения софтуер – просто защото са представени твърде объркващо, трудни са за разучаване и изискват наличието на свръх-чове?ки умения у потребителите. Но неща, които в крайна сметка са необходими, за да вър?и работата качествено.
така – голямата част от всеки екран в системата е заета единствено от основното нещо, върху което се труди един потребител. За журналистите това може да е някоя новина, за фотографите - снимка, за маркетинга – банер/рекламно каре, каквото и да е. То е в центъра на екрана.
Ако трябва да се направят допълнителни настройки, да се добави нещо, да се набави допълнителна информация до основната работна площ има? една тънка вертикална ивица (наричаме я „Рибъна”), в който се развиват всички второстепенни действия. Съдържанието на лентата е се мени в зависимост от контекста и действията на потребителя.
(Скрийн?от.)
Пример: пи?е? статия. ска? да осигури? на читателя си малко допълнителна информация – фон за историята. Това могат да са връзки към стари новини, снимки, каквото и да е от информацията, налична в системата. Просто стартира? търсене в Рибъна, преглежда? резултатите, харесва? онзи който ти трябва, с един клик го добавя? до материала и то цъфва в основната част. 1. Без да се налага да отваря? отделен прозорец, в който да пуска? търсачка, 2. Без да копира? от там каквото ти трябва, 3. без да се прехвърля? обратно в първия прозорец 4. без да се чуди? къде точно си искал да го вмъкне?, 5. без да се налага да запазва? цялото нещо, за да види? как точно ще се отразят промените и т.н. и т.н..
Може и да не звучи много добре (предполагам, че е трудно да си го представи човек без да е цъкал поне прототип), но ми се струва единственият нормален и разумен начин. Защото благодарение на технологията (ще трябва и затова да пи?а скоро) всичко става без презареждане на екрана, без отваряне на безброй нови прозорци, без затрупване на потребителя с все нови и нови елементи на интерфейса.
Просто онова, върху което се труди? в момента си седи в центъра на екрана, а в страни се показват всички инструменти, с които може? да го обработва?. Разбира се само когато ти трябват. наче са си прилежно подредени и скрити от погледа.
Сега ми хрумва една добра метафора. Ако не говорех за интернет приложения, а за дърводелство, работният екран на приложението ще?е да е тезгяха на дърводелеца. Върху него той обработва парчето дърво, от което след време ще стане я закачалка, я някой стол. нструментите си той държи в чекмеджето (Рибъна в на?ия интерфейс) под тезгяха. Дърводелецът отваря чекмеджето само, когато му притрябва да вземе инструмента, нужен му за онова, което вър?и в момента. Ако е прилежен майстор ще държи на чистотата и подредеността на работното място и след като си свър?и работата ще остави инструмента обратно в чекмеджето. Ние сме така услужливи, че дори автоматично прибираме обратно инструментите, които вече не използва и държим работната му площ чиста.
Освен това не караме на?ия дърводелец да обикаля измежду няколко тезгяха, всеки от които да има собствено чекмедже само специфични инструменти. Все едно на едното място да рендосва, на другото да дялка, на третото да лакира. ли пък всеки път да пренася закачалката от единия тезгях на другия, за да продължи да вър?и работата си там. ли пък на отделни маси да майстори по една конкретна част и след това да ги сглобява на друга маса…
Ето как се опитахме да спестим възможно най-много от мъките на бедните хора, които ще трябва по цял ден да работят със системата, създадена от нас. С въвеждането на идеята за Рибъна постигнахме два много важни ефекта:
- по-голяма консистентност на интерфейса
- по-прост, т.е. лесен за възприемане и разбиране интерфейс
Освен това елиминирахме и доста стъпки в процеса на работа, което значи че се намаляват местата, където човек може да се обърка и да допусне гре?ки. Но за гре?ките някой друг път.
March 22nd, 2006 at 9:24 am
Добре се е получило както изглежда от screenshot-а. нтересно, че рибоня те е навел до това ре?ение. Аз лично гледам на това ново изобретение като хибрид от tabstrip, toolbar и меню, което е context-aware (съжалявам за липсата на адекватен превод). Във всеки случай е чисто навигационен или, хм, команден елемент.
При теб ситуацията е друга. По-скоро напомня help панела в стария офис (2003). Там обаче, различните “чекмеджета” не са като меню, а падат като натисне? върху titlebar-а на панелчето. Дори и като функция според мен работите от този панел са по-близки до това, което ти описва?. Особено в powerpoint, където там излазя библиотеката със графични символи.
Едно ме притеснява - при теб табчетата с чекмеджетата са със същия изглед като подменюто - което (макар и отделени с рамка) ги прави да изглеждат малко като служебни опции от подменюто. Може би друго оцветяване?
Не знам на каква разделителна бачкат ком?иите, но аз лично бих смъкнал цялата тая история най-долу на екрана, за да могат editor ите да са по-големи. Тъй като обаче надали ще ме послу?а?, поне провери дали fck има?е бутончето full screen - препоръчвам го. Ако няма такова бутонче - според мен е от първостепенна важност. Заявявам това от позицията на човек, който пи?е средно по 5 пъти на ден по два-три параграфа в уеб базиран едитор.
П.П. мате тагове? sooooo web 2.0… Сега можете да си направите tag cloud, и да подпалите огън по средата на офиса, където ритуално да принесете в жертва някой web 1.0 постер.
March 22nd, 2006 at 12:30 pm
А казва?, че не правите уеб приложения за проектиране и изтрелване на ракети:)
March 22nd, 2006 at 12:49 pm
Във връзка с писанието на 37сигнала посочено от Гочо… Сия, аз съм фен на тва дето го правят и като цяло разбирам методологията им… Но МНОГО СЛНО В ПРЗОВАВАМ да прочетете коментарите на “The Voice of Reason” във въпросното блогиране.
Тоз “наскоро?ен пример” всъщност е готин от една страна - аз правя същите скици за всичко, дори като трябва да обясня на някой нещо. Обаче те го казват се едно “ми ей тва е тука, драсни една скица и айдеее, готоу нящуту”. Нещата никога не са толкова прости.
March 22nd, 2006 at 1:08 pm
Едно важно пояснение може би е, че разработваме система за силно контролирана среда. Хората ще работят с нея през браузър, но не на стандартния Windows. Освен това резолюцията на екрана им е фиксирана на впечатляващите 1280х1024, като по проект няма пиксел, който се използва за декорация, въздух или нещо нефункционално. Скрийн?ота е реално в мащаб 1:2. Това ни позволи да отделим едни 300 пиксела вдясно за рибъна. При това положение им остават около 900 пискела работна площ, в която почти се събира реалния сайт (ще бъде малко над 900 пиксела ?ирочина по дизайн).
В тия ми ти 300 пиксела се разиграват доста драматични истории - може? да добавя? съдържание към основната част или да и променя? лейаута, настройва? метаданните (и за тях ще трябва да пи?а) и маса други бози.
Боби: практиката на 37сигнала е специфична с това, че те създават продукти, от които самите те имат нужда и самите те си ползват. Това наистина ги поставя в уникална позиция, но въпреки това съветите им ако са осмислени добре могат успе?но да се приложат и в по-стандартни ситуации (като на?ата).
Другият момент е с итерациите - изгубих им броя. Една итерация почти винаги започва?е с обсъждане на функционалността, която ни трябва, след това създаване на прототип, съживяване на прототипа и проследяване как се връзва с цялото нещо. Т.е. е почти рисунка към екрана само дето при нас е от екрана в протоипа до екрана в истинското нещо. Работи! пести маса време. Не ме питай как, щото ако не ти идва отвътре, предполагам е сложна работа.