Работя в една малка фирма за уеб дизайн и софтуер и съм единственият дизайнер и всъщност се опитвам да се изявявам и като information architect и UX designer. Въведох някои нови методи на работа във фирмата като използването на Visio за wireframing но обмислям и изпробването на Axure. Като цяло обаче смятам да се развивам в UX за софтуер и много ми се иска един ден да работя във фирма като Телерик или друга голяма такава. Имам малко информация обаче относно начина на работа и необходимите умения, а искам да знам на какво да наблегна още от сега тъй като опитът ми е главно в уеб дизайна. Та ще се радвам да споделиш какви точно умения се искат, какви tools използват UX дизайнерите в Телерик (Axure, Epression Blend, трябва ли да знаеш XAML?), и от друга страна дизайнерите на UI (изцяло Illustrator ли се ползва за създаването на дизайна на един интерфейс?)

Ето какво и отговорих:

Привет,
Първо да се извиня, че пиша с два месеца по-късно, но чак сега (случайно) видях това съобщение.

Иначе за туловете – общо взето всеки ползва каквото му е удобно. Сравнително популярно е Axure. Други ползват Expression Blend. На мен ми е най-бързо и лесно да ползвам HTML + jquery (когато е важно да се покаже интерактивност и как се разцъква даден интерфейс) и евентуално Fireworks (когато трябва да се покаже набързо как е подреден даден екран или когато набързо искам да пробвам с различни структури на данните). Та в заключение – няма стандарти. С каквото най-лесно си обясняваш идеите и другите те разбират – това е.

Иначе за умения – графичния дизайн е задължителен. не толкова да можеш сама да правиш, но да знаеш какво е добър дизайн и кои са основните принципи. Също да можеш да пишеш добре и разбираемо – ако можеш в кратък текст да обясниш дадена функционалност (Примерно в текст на бутон или чекбокс да обясниш какво прави съответната функционалност). И другото полезно е да имаш познания по когнитивна психология – как хората възприемат различни неща и как ги интерпретират. И понеже основна част от възприятието ни е визуално тука материята се припокрива с теорията на графичния дизайн. Но въпреки това когнитивната психология ти помага да обясниш защо даден човек би взел дадено решение.

На толкова общ въпрос, такъв общ отговор. Но според мен няма универсално обобщение – трябва ти това и това и вече ставаш. Всичко е до желание, практика и много мислене.

Моята презентация

Качих в SlideShare презентацията ми, но по-добре да свалите PowerPoint файла , за да видите и бележките ми към всеки слайд. Те са сравнително подробни, но не са съвсем това, което говорих. Някои неща пропуснах, други пък ми се получиха по-добре по време на представянето. Забравих да снимам видео за съжаление…

Освен мен, презентации имаха и Владимир Петков (Каладан), Огнян Младенов и Борил Караиванов.

Другите презентации

Основната идея на Владо беше да накара хората да се съобразяват с конктекста, в който създават съдържание.

Това според него се постига по два начина. Първо се съобразяваш с медията и не използваш директно неща предназначени за друга медия в уеб (от печатна медия в уеб, например). Второ — даваш не само данни (факти, линкове), но и допълнително информация (контекст), която помага на хората да осмислят и разберат защо тези данни са важни.

Огнян Младенов говори за SEO. Той вече публикува презентацията си. От слайдовете доста добре може да се придобие усещане за какво говори (рядко съм виждал слайдове с толкова много текст :)).

Борил пък направи нещо като въведение в типографията за начинаещи.

И така.

Не казахме най-важното

По време на тренинга ми хрумна, че съм изпуснал нещо много важно. Всъщност може би най-важното. Все пак добавих един слайд, но не мисля, че с него успях да натъртя достатъчно. На кое?

Създаването на съдържание за уеб е супер трудно нещо. Вероятността да го направиш добре от първия път е много малка.

Освен, че трябва много внимателно да се подготвиш — да познаваш аудиторията си наистина добре (като нужди, ключови думи и всякакви други детайли), — трябва и да следиш и да реагираш след като вече си пуснал нещо онлайн.

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

Има и инструменти, с които да тестваш варианти на едно съдържание, за да видиш кой вариант се представя по-добре.

Супер важно е да следиш какво се случва и да се опитваш да оптимизираш непрекъснато. Иначе просто умираш.

• Първа част – за линковете за споделяне
• Втара част – за табовете (тази статия)

Хората не разцъкват табове

В стремежа си да сложат възможно най-много съдържание на единица площ, уеб дизайнерите и собствениците на сайтове използват най-разлини подходи. Типични такива са падащите менюта и табовете.

За падащите менюта съм писал преди – не ги харесвам и не ги препоръчвам.

За табовете обаче съм чел само патърни за употреба – как да изглеждат и да се държат, но не и смислена критика дали са ползваеми или не. А винаги ми е било любопитно как се представят в истинския живот.

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

На началната страница на сайта (и страницата с най-много посещения изобщо) на едно от най-видимите места има блок с новини, които са групирани в отделни категории. За всяка категория има отделен таб.

Предположението ми беше, че сравнително малък процент от хората ще кликат на табовете. И наистина статистиката показа, че по-малко от 5% от посетителите на началната страница кликат на някои от табовете.
На началната страница на спортната страница има сходен интерфейс и там процентите са 15. Разликата може да се обясни с това, че докато на началната страница хората идват по различни причини и имат много повече опции, то на вътрешната страница вече са доста по-съсредоточени и съдържавнието в табовете всъщност се явява голяма част от смисленото съдържание.

Което е по-интересно е, че общият брой на кликовете върху новините във всички скрити табове е една пета от броя на кликовете върху новините от показания дефолтен таб. Представете си че ако в показания таб хората цъкат на 100 новини, то в останалите 5 таба са цъкнали на общо 20. Показателно за ефективността. От друга страна обаче е по-добре от това да имаме само един таб и вместо 120 да получим само 100 клика.

Изводът е, че ако разчитате, че с помощта на табовете ще успеете да пробутате повече съдържание – не хранете излишни надежди. Полза както се вижда има, но тя е почти маргинална. В конкретния случай загубата на място не е голяма и не пречи (много) на останалата част от съдържанието в страницата. Т.е. хем сме изгубили малко място, хем малко хора кликат, но поне не сме навредили на останалата част от съдържанието.

PS. Тук отново трябва да направя уточнението, че резултатите са за този конкретен дизайн. В друг контекст табовете могат да имат и по-добри резултати.

Ето и видеото:

Звукът може да е кофти, затова препоръчвам използването на слушалки и по-голямо внимание ;)

Слайдовете от презентацията качих в SlideShare:

Малко са интерфейсните елементи, които създават много проблеми и едновременно с това са толкова популярни като падащите навигационни менюта.

Те са един от най-старите елементи на графичните операционни системи. Въведени са масово за пръв път в компютрите Apple и тяхната MacOS. Най-голяма популярност придобиват заради продуктите на Майкрософт, където основната „навигация” е т.нар. файл меню. И макар Майкрософт и Епъл дълго да се съдиха, кой от кого е откраднал интерфейса, всъщност трябва да благодарим на хората от Xerox, които в началото на 70-те изобретиха първият графичен потребителски интерфейс за операционната система PARK.

В уеб падащите навигационни менюта се подвизават от доста време. Преди десетина години те бяха едно от първите превъплъщения на DHTML технологията. Уеб дизайнерите се надпреварваха да правят такива менюта и да ги използват в сайтовете си, за да покажат „високотехнологичните” си умения и да създадат усещането за неограничените технологични възможности на уеб като медия. Използването на този вид менюта се оправдаваше и с пестенето на място и опростяването на дизайна.

Сред експертите по ползваемост обаче падащите менюта съвсем не се тачат с особена популярност. И това не е случайно. Тестовете с потребители показват, че макар този интерфейсен елемент да е познат на потребителите, той създава доста повече проблеми (и то критични) отколкото решава.

Основният проблем с падащите менюта е, че спират естествения поток от действия на потребителя. Как? Представете си как отивате на една страница и я преглеждате. Въз основа на информацията, която виждате в тази страница вие вземате решение какво да направите по-нататък. Ако решите да кликнете върху линк от падащо меню изведнъж пред вас се показва скрита до момента информация (линковете в падащото подменю). Тази нова информация трябва да бъде преосмислeна и едва тогава отново бихте решили – дали да кликнете на някой от новите линкове или да огледате отново страницата за по-добър избор. С други думи нормалният процес на разглеждане на един сайт е прекъснат, а потребителят е разколебан в способността си да взема решения въз основа на видимото върху екрана.

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

Основно правило е да се направи така, че линковете, които предизвикват появата на падащо меню да се различават от останалите. Стандартен начин за тяхното диференциране в такъв случай е използването на стрелка или триъгълник, които сочат надолу или надясно (зависи накъде ще се покаже менюто. Освен това е важно навигацията в самите падащи менюта да не изисква голяма сръчност и упоритост, за да уцелиш точно тази връзка, която ти трябва. Много често неправилното движение кара падащото меню да се скрие или пък да се покаже съседното меню и така потребителят може да кликне върху погрешен линк. Добър пример в това отношение е навигацията на Flickr, където падащото меню се показва единствено, когато потребителят кликне стрелкичкаа надолу, а не, когато мине с мишката или кликне върху някои от основните линкове.

Разбира се изборът, кога да ползвате изскачащи навигационни менюта в дизайна си остава изцяло ваш, но следващият път, когато ви засърби да използвате един от тия „яки” JavaScript компоненти, помислете дали това е наистина необходимо и дали няма по-малко стресиращ начин да осигурите навигационен избор на потребителите си.

Много от нас сигурно си спомнят братята Грим и по-скоро историите и света, който описват в своите прочути приказки. Услужливите редактори и преводачи са смекчили достатъчно зловещите образи на вещици, говорещи животни, всякаквите мутанти с огромен или миниатюрен ръст и прочее малформаци, които скитат из тъмни гори и странни земи, кроят си пъклени планове, тук там се поизяждат. Сега децата се радват, когато всичко свършва добре и всички заживяват в мир.

В света на уеб дизайна обаче сме все още като че ли все още в първите и непреработени варианти на приказките. В гората наречена интернет, потребителите все още често се губят и отвсякъде ги дебнат куп опасности – огромното количество безполезни сайтове, агресивните рекламни банери, вдебилените SEO експерти.

Едно често срещано решение на проблема с изгубването (особено в по-големите сайтове) е използването на пътечки от линкове. В английския език терминът e breadcrumbs и буквално се превежда като пътечка от трохи. И както вече се досещате произлиза именно от приказката за Хензел и Гретел, които докато бягат от къщи в гората, оставят по пътя си трохи от хляб, за да могат после да се върнат обратно.

Пътечките представляват хоризонтален списък от имена на страници, които описват всяко ниво от йерархията на сайта от най-горната (началната) страница на сайта до страницата, на която се намира потребителя. Всяко име в списъка е линк към съответната страница.

Бредкръмбовете са особено полезни, когато сайтът има повече нива в йерархията си и основната навигация не може адекватно да покаже на къде точно се намира някоя страница от по-долните нива в йерархията. Те могат да помогнат на потребителите да си отговорят на два от най-важните навигационни въпроси – „Къде съм?” и „Къде мога да отида от тук нататък?”.

Някои препоръки при оформянето на пътечката:

• Първият линк да не е просто “Начало”, а нещо по-специфично, например името на сайта, защото „Начало” или „Home” е прекалено общо и нищо незначещо понятие.
• Отделните имена се разделят със знак за по-голямо – „>”. Често се използват и други символи за разделяне като вертикална черта „|”, наклонена черта „/” или „\”, две точки и всякакви други варианти. Най-добре въпреки това е да се използва знакът за по-голямо, защото интуитивно подсказва значението на всяка страница в списъка и принадлежността и по-горното ниво. Т.е. началната страница е най-важна, следващата страница е по-малка и част от по-горното ниво и т.н. Всеки друг символ означава по-скоро разделение, а наклонените черти говорят нещо само на хора, които са виждали команден ред на операционна система.
• Името на страницата, на която си в момента се включва в пътечката. Ако пътечката и заглавието са разделени визуално потребителят може да не разбере, че представляват едно цяло и имат комбинирано значение – да показват къде се намираш в момента и принадлежността на настоящата страница към някаква по-сложна и многопластова структура.

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

Една от неизменните тенденции, които от години наблюдавам в най-разнообразни сайтове из българския интернет и в запитванията за разработка на нови сайтове, които получаваме е присъствието на величествения линк „Полезна информация”. И всеки път, когато го срещна си започвам да се чудя „Е, добре. А останалата информация на сайта безполезна ли е?”

В интерес на истината „полезна информация” обикновено е най-ценната информация, която човек може да научи. Най-честият пример са сайтовете на различните туристически обекти в България – градове, хотели, природни забележителности. В тях „полезна информация” дава отговор на въпроса „Как да стигна до проклетото място?” или прави полезното уточнение – „отворено за посетители в понеделник от 8:30 до 9:30 сутринта”. Мерси.

Въпреки това обаче, ако разделим всички сайтове въобще на две условни групи – полезни и безполезни, с учудване можем да открием, че онези, които съдържат магическия линк „полезна информация” по-скоро попадат в графата на първата група. Защото те поне съдържат някаква информация, която може и да е от полза на някого и проблемът е по-скоро в това, че създателите му не са намерили правилното решение на въпроса „Къде да сложим всички тия неща, които не знаем къде да сложим?” Повечето други сайтове просто не казват нищо смислено.

И докато собственици на сайтове с „полезна информация” сравнително лесно могат да решат проблемите с навигацията в сайта като просто сменят заглавието на съответния линк (с отговора на въпроса, който могат лесно да предположат, че си задават потребителите, когато търсят даденото съдържание), то останалите имат доста повече работа.

И именно тук започва по-тъжната част от историята. Защото все още е рядкост доброто съдържание в българския интернет. Фрапиращо малко са сайтовете, които предлагат уникална и в крайна сметка наистина полезна информация в сравнение с безскрупулно откраднатата, безсмислено копираната или оригинално излишната такава. Най-лесно е да вземеш един клип от YouTube и да го качиш в една дузина сайтове за видео, но я се пробвай сам снимаш нещо. Съвсем лесно е да препишеш новините на някоя от големите новинарски агенции и да имаш „онлайн медия”, но я напиши някой смислен анализ или коментар.

Доста странно поведение. Защото редица примери доказват, че сайтовете с добро съдържание имат огромно положително влияние върху крайния резултат за собствениците на сайта. Не случайно основният съвет за привличане на повече потребители, който префърцунените експерти по оптимизация за търсачки дават е да се осигури разнообразно и уникално съдържание. А абсолютно същото нещо повтарят и експертите по ползваемост от години.

И въпреки това голяма част от усилията на разработчиците и собствениците на сайтове отиват в друга посока – безсмислени ефекти, излишна функционалност във вида на флаш анимации, падащи менюта или някакви анкети. А има толкова голямо поле за усъвършенстване, които ще имат далеч по-голяма възвръщаемост – информативни описания на продуктите, качествени фотографии и въобще смислено съдържание. Или с други думи – не е достатъчно да си измием ръцете като сложим една „полезна информация” някъде в сайта. От решаващо значение е да наистина да се посветим на създаването на съдържанието на своя сайт и да го приемем като основополагащ фактор за нашия онлайн успех.

Искат да въведа информацията, която търся.

Ако имах информацията, която търся, защо да я търся и още повече защо да я въвеждам в някакво поле?

Чудесно доказателство, че писането в интерфейса не е проста работа и не трябва да се пренебрегва.

Сутрешната сесия започна Димитър Симов, който е колега от Нетейдж и също основател на Лукрат. Презентацията му беше за това как се пише текст за уеб. Темата по принцип е много важна, защото съдържанието все още е номер 1 най-важно нещо за всеки уеб сайт, а текстовото съдържание е най-често срещаното и ползваното (все още). Основната препоръка на Джими беше да се пише кратко и изчерпателно. Нещо, което е валидно не само за уеб текста и нещо, което успях да се убедя в последната 1 година, докато пишех статиите си за списание .net.  Писането за печатна медия е доста дисциплиниращо, защото имаш ограничние откъм броя символи и трябва внимателно да премислиш какво искаш да кажеш и как да се вместиш в заделеното ти място. Имаше и добри препоръки за имената на линковете – да съдържат само ключовите думи, които характеризират страницата, която отварят. Друга важна точка беше за това, че текстовете не са само примерно съдържание на някоя страница, а въобще всичко, което потребителят чете по екрана – съобщения за грешки и предупреждения, навигация, описания на картинки…

След Джими говори Еленко – пак предимно за писането и по-скоро за създаването на съдържание в Интернет. Основната му теза беше, че всяка единица съдържание (примерно блог пост) трябва да осигурява достатъчно контекст. За да бъдеш полезна част от онлайн средата трябва не само да копираш, но и да оставяш собствената си гледна точка като допринасяш за диалога. Основните му примери бяха свързани с неговия блог и начина, по който той създава съдържанието си. Показа как използва Google Reader и Twitter, за да филтрира информацията и да добавя собствената си гледна точка. Написал е сам някакъв уиджет, в който комбинира фийдовете от двете услуги. Посочи за модерно създаването на съдържание да става в микроформат – например, че микроблог платформи от сорта на Twitter, а дългите постове като изразно средство за по аналитична информация.

Англичанинът Алистър Кембъл говори за достъпността и доколко това, че ако един сайт е достъпен от всякакви хора и устройства, той е и по-ползваем. Интерсното в презентацията му беше представянето на това как различните технологии, които подпомагат хората с физически и психически недостатъци да разглеждат интернет сайтове. Разбира се писането на правилен маркъп спомага точно за този вид употрбеа. Всъщност правилният маркъп е само страничен резултат от това как мислим структурирането на информацията в страниците си. Друго основно правило е отделните страници да са консистентни една с друга особено по отношение на навигацията. Аз лично винаги съм се интересувал повече от достъпността като средство да направиш съдържанието си ползваемо във всякакви устройства, отколкото за всякакви хора, но така или иначе в крайна сметка се постигат и двете.

Хората от НБУ представиха доста накратко изследванията си с проследяване на погледа. Според мен такива изследвания само потвърждават неща, които знаем. Вече са изживяли ролята си като по-смислен инструмент за тестване на ползваемостта и откритията, които са били направени с тяхна цел би трябвало да са част от арсенала на всеки нормален проектант.

Следобедната част започна с моята презентация. Самата презентация вече качих в интернет – в нея са както слайдовете, така и бележките ми към тях, които са 1:1 с това, което говорех. Т.е. се надявам да не липсва видеото, което забравих да запиша. За съжаления не мисля, че се получи нещо смислено. За в бъдеще ще правя само или чисто теоретични презентации, които запознават аудиторията с дадена концепция, или наситена с примери от практиката презентация. Неумелата ми комбинация от двете не се получава добре и по-скоро обърква хората, които за толкова кратко време не могат да разберат добре връзката между теорията и практиката. Струва ми се, че презентациите на добрите лектори, които сме свикнали да гледаме в чужбината са именно в една от двете крайности и затова са доста по-добри.

След мен Питър Мерхолц изнесе презентацията си Subject to Change. Който е чел книгата на Adaptive Path (ревютата в amazon също вършат доста добра работа) и гледал записите от предишните представяния на Питър знаят за какво става въпрос. Накратко – успешните бизнеси в днешно време разглеждат и правят продуктите и услугите си така, че самите продукти като технология и способности остават на заден план, а на преден е изживяването, което предлагат на потребителите. изживявенето е продуктът, който трябва да се проектира. Самото проектиране става при използването на системния подход, който разглежда продукта не само като сбор от неговите фийчъри, а като част от контекста, в който съществува.

По време на видео презентцията на Владо се разсеях. Говореше за това, че тестовете за ползваемост на мобилни приложения са доста по-различни от традиционните и за някакви методи за провеждането им. Освен това говори и за разликата в средата – за разликите в браузърите и в контекста на употреба (десктоп компютри, ползвани в офиса срещу мобилни телефони ползвани навсякъде), които са много важни фактори при проектирането на мобилни приложения.

Красен Хинков от Мтел пък показа някои успешни практики за оформяне на съдържанието в мобилния интернет. Основната му теза беше, че съдържанието трябва да се предлага в компактни модули, които само повърхностно обобщават някаква информация и препращат към страници където съответната функционалност или пълно съдържание е достъпна в целия си блясък. Стратегията на М-тел в тая насока е да предложи на потребителите си възможност за персонализация посредством създаването на лични страници с избрани от всеки потребител модули (уиджети) само с информацията, която интересува дадения човек. Радващото е,ч е спомена спецификацията на W3C уиджети, което за разработчицита на дадена услуга може да означава, че няма да правят кой знае какви усилия, за да създадат собствени уиджети за М-телската платформа, а ще могат да използват работата си за iGoogle или my.yahoo.com например.

Като цяло хубавото на семинара беше, че се получи известно застъпване в темите между отделни презентатори и по този начин се видяха различни гледни точки. Както обсъждахме с един тип от Ruby on Rails общността, обаче, трябват повече събирания на хората, които се интересуват от ползваемостта в България. Явно “релсистите” правят такива събирания регулярно (бях мяркал в юзъргрупата им нещо такова, но не съм ходил, че са малко специфични темите им за разговор). Което ме навжда на мисълта, че както юзабилистите има какво да научат от програмистите, така и обратното. Или най-малкото обмяната на идеиотносно процеса на работа  (дори и на чисто теоретично ниво) няма да навреди.

Още по темата е писано в:

• http://marfiland.blogspot.com/2009/04/usability-seminar_14.html
• http://search.twitter.com/search?q=usablt