Bulgarian Experience

Tips & Tricks

Netage Lecture Series: Проектиране на уеб приложения за голямо натоварване

Wednesday, March 19th, 2008

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

Казва се Netage Lecture Series и всъщност си е типичен баркамп - измисляме една тема за презенцтация и дискусия, събираме се на някое удобно място и междувременно пийваме по някоя бира, за да внесем неформален елемент в цялото нещо.

Първото събитие от серията ще се проведе следващата сряда (26 март) привечер в софийския Central Park хотел (до пилоните на НДК, една лъскава нова сграда).

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

Официалната покана звучи така:

Netage стартира Netage Lecture Series: поредица от лекции, с които целим да споделим новите си знания в областта на дизайна, програмирането и управлението на проекти.

Първото събитие от поредицата ще се проведе на 26-ти март (сряда) в Central Park Hotel на бул. Витоша 106.

Темата на лекцията: Проектиране на уеб приложения за голямо натоварване.
Кога: 26.03.2008 (сряда), 18:00
Къде: Central Park Hotel, бул. Витоша 106

По време на лекцията ще обсъдим следните въпроси:

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

Ще споделим опита си от изграждането на едни от най-популярните новинарски сайтове в България, но се надяваме на лекцията да присъстват и хора, които се занимават с не по-малко натоварени и интересни проекти – видео и файлови портали, новинарски медии и др.— с които да обменим знания и опит.

След Q&A сесията, ще продължим разговорите на бира.

С нетърпение Ви очакваме!

Елате повече.

Ако има вероятност да дойдеш пиши в коментарите или се разпиши във Facebook event-a.

Bulgarian Experience Webcast 2

Wednesday, November 14th, 2007

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

Логично е да имате очаквания за нещо повече от предишния път, един вид да съм се поучил от грешките си. Уверявам ви, че такова нещо няма и този втори мой продукт се оказва дори по-смотан и от първия.

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

Иначе говоря за различни неща и най-вече различни проблеми, които са свързани със скролването в уеб страниците.

По време на презентацията се споменават следните уеб ресурси:

Ето и самото видео:


Началната страница на capital.bg

Friday, June 22nd, 2007

От вчера capital.bg е с променен дизайн.

 

На илюстрацията по-горе с червена пунктирана линия е отбелязана видимата площ преди човек да трябва да скролира при резолюция 1024х768. Първият пунктир указва каква част от съдържанието се вижда, когато го има огромният банер “За града”, който явно се показва само при първоначално зареждане на страницата. При повторно зареждане банерът го няма и видимата площ се разширява до втория пунктир.

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

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

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

Както писа преди време Джарид Спуул от UIE, отделянето на значителни ресурси за глобална навигация в един сайт, защото през по-голяма част от времето на потребителите не им трябва глобална, а локална (контекстно-зависима) навигация. Подобни твърдения има и Джейкъб Нийлсен, който направо пита Полезна ли е навигацията въобще? Добро обобщение на изледванията посветени на навигацията е направил Хенрик Олсен в една статия, която преведох за Groove Manifesto.

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

Но да се върнем на началната страница на capital.bg. Освен с неефективното оформление преди първия скрол, сайтът впечатлява и със загубата на значително пространство чрез неефективния си grid и дизайна на анонсите за новините.

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

Да се надяваме, че версия 5 на сайта ще отстрани тия проблеми, тъй като честно казано статиите в Капитал са интересни сами по себе си и ще е жалко да продължат да страдат от неадекватния дизайн.

Bulgarian Experience Webcast 1

Monday, June 18th, 2007

С извинение за абсолютната си аматьорщина по отношение на създаването на уебкастове, представям Bulgarian Exprience Webcast 1: Анимацията в интерфейса.

Какво е Bulgarian Experience Webcast?

Записвам екрана на компютъра си и разказвам какво ми е направило впечатление в нещата, които се показват там. Представлява видео - запис на действията на екрана с Camtasia Studio и аудио запис с моя коментар. Идеята ми е да коментирам различни примери за добри и лоши решения за интерфейси с надеждата да съм полезен на някой.

Защо уебкаст?

  1. Защото позволява показването на интеракцията в реално време.
  2. Защото позволява аудио коментар от моя страна, което спестява доста писане.
  3. Защото като цяло отнема доста по-малко време от изпипването на цял блог пост, а е доста по-богато като изживяване.

Анимацията в интерфейса

Това е темата на първия уебкаст. Струва ми се интерсна с оглед настъпването на различните и доста приятни JavaScript библиотеки наоколо, които позволяват анимирането на различни ефекти - скриване, показване, преместване и т.н.. Основните преимущества на адекватното използване на анимарани ефекти са:

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

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

По-голям размер

Малко повече за идеята ми за уебкастовете

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

Само че в уеб вече далеч не всичко е само текст и картинки. От няколко години с нарастване на скоростта на свързване към Интернет стават все по-популярни и други медии - звук и видео. Появиха се т.нар. подкастове, които са си просто музикални файлове, които човек записва на MP3 плеъра си и слуша, когато има време. Появи се и YouTube - мястото, на което хората споделят видео записите си.

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

Сиреч - гениалната ми мисъл беше - ако някой липсва от видео сайтовете, то той липсва от голяма част от живота на онлайн потребителите.

Не знам защо YouTube не е завладян тотално от рекламодателите към момента, защо преди пускането на всеки клип няма реклама, защо в vbox7 не се върти реклама на М-Тел и Кока-Кола.

Знам обаче, че аз трябва да бъда в това пространство. Bulgarian Exprience уебкастовете са идеален начин да се пробвам.

Дано ви се харесва.

Български фирмени блогове

Monday, June 4th, 2007

Един добър пример за бизнес блог. Хората от сайта за запознанства gepime.com поддържат блог, в който обявяват новите функционалности на сайта и събират мнението на потребителите си. Някои от постовете в блога са съвети към потребителите как да се справят с даден проблем. Т.е. създателите на сайта не само слушат, но и отговарят, когато ги питаш и показват, че са загрижени за развитието на продукта си. Тия съвети, също така, са доста хитър начин да научиш как хората използват сайта ти. А хората често успяват да правят неща, за които създателите на сайта дори не са сънували.

Скрита информация на страницата - not cool

Tuesday, May 29th, 2007

Наскоро имах възможност да наблюдавам как хора свалят нелегално филми от интернет. За всеки филм разбира се им трябваха субтитри на български език. За щастие имаха на разположение subs.unacs.bg - сайт предназначен единствено да предлага български субтитри за огромно количество филми.

Каква изненада обаче. Хората не успяваха да намерят субтитрите, които им трябваха и доста се фрустрираха от неуспехите си. Но защо?

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

Проблемът обаче беше в представянето на резултатите.

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

Изправени пред подобен избор хората започваха да свалят всички субтитри подред и да ги пробват. Разбира се повечето бяха неподходящи. Изнервящо.

Ключът от палатката се крие в допълнителната информация, която се показва, когато човек мине с мишката върху заглавието на даден ред:

Един от редовете в тази допълнителна информация - “Доп. инфо” съдържа и името на файла, за който се отнасят субтитрите. Единственото, което трябва да направи човек, разполагащ с това доп. инфо и сваления преди това файл с филма е да сравни двата текста. Лесно? Не съвсем.

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

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

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

P.S. [1 юни 2007] Стори ми се да напиша това, защото този сайт правен очевидно от geeks за geeks е достигнал завидна популярност и влиза топ 50 на най-посещаваните от българи сайтове според класацията на alexa.com.

Правилно изписване на “имейл”

Tuesday, May 22nd, 2007

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

За първи път се замислих как е правилно да се пише “email” на български за един от сайтовете на Орбител. Тогава направих кратко проучване в Гугъл как стои въпросът с популярността на различните варианти за изписване и превеждане на този термин. Преди няколко месеца пък Еленко Еленков публикува своя “Пътеводител за правилно писане на български“, в който даваше препоръка, противоречаща си моята идея за нещата.

Та в българските сайтове най-популярно е да се пише на латиница “email”, т.е. точно както е в англоговорящите сайтове. Това е и правилното изписване на английски език, т.е. без тире и без главно “E”. Този вариант обаче не ми се струва уместен, защото 1) задължава човека, който чете да знае как се чете и произнася на английски думата и 2) човекът, който пише също трябва да знае как се пише на английски “email” и освен това да превключва клавиатурата си от писане на кирилица, към писане на латиница. Не знам как се чувстват по въпроса екранните четци за слепи, но при всички положения използване на английски думи и латиница при писане и четене на български не е естествения начин да се случват нещата. Никой не пише internet на латиница, нали?

“Електронна поща” пък е доста по-дълго. В смисъл, че са си две думи. Освен това повечето хора, когато говорят свободно (на ежедневен български) не казват “Изпрати ли ми онази електронна поща?”, а просто “Изпрати ли ми онзи имейл?”. “Електронна поща” може би е добре да се използва, когато в един трябва да се направи разграничение обикновена поща и електронна поща.

Доста популярно в българските сайтове е и изписването “е-мейл” във вариации с латинско или кирилско ”е”. Но тази “дума” е доста странна. От една страна имаме “е” с тире, която явно е взаимствано от грешното изписване на англисйки на “e-mail”. Самото ”е” е съкратено от “electronic”. От друга страна имаме изписване на български на английската дума “мейл”. В крайна сметка се получава една много причудлива кръстоска полуанглиско съкръщение и английска дума изписана на български.

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

В заключение, на български “email” правилно се пише “имейл”.

Сайтове за пример 1

Friday, April 27th, 2007

kashti.com

Един сайт, който ме остави напълно задоволен.

Потърсих в гугъл за “сглобяеми къщи” и излезе на първо място. Не е учудващо като се има предвид богатото количество информация, което явно е направило добро впечатление и на други хора, та са решили да сложат линк към сайта и по този начин да му вдигнат PageRank-а. Не мисля, че това със съдържанието е била съзнателна стратегия на създаделите на сайта. Просто, под натиска на клиентите си, са се постарали да преложат възможно най-изчерпателна информация.

Като говорим за клиенти - цялото съдържание е написано в стила на монолог, в който говорещата страна знае какво точно ви се върти в главата или искате да попитате и дава отговор веднага. Освен това няма да намерите още на първа страница снимката на шефа с неговата дъщеричка и типичното за огромна част от фирмените сайтове ”Пешо ООД е регистрирана по Търговския закон с указ на презедента Н1233 от 12.03.2007 с предмет на дейност…”. Информацията в сайта е ориентирана изцяло към въпросите, които един потенциален клиент на фирмата би имал и освен това отговорите са наистина полезни и звучат истинно, т.е. точно такива каквито бихте получили в разговор на живо след като е минал първоначалния етап на опознаване, сборичкване и последващо сприятеляване. Хората не са си спестили нито информация за цените, нито за недостатъците на този тип строителство.

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

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

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

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

links for 2007-04-05

Thursday, April 5th, 2007

Връзка: ThinkFree

Tuesday, February 27th, 2007

Една от услугите, които се рекалмираше на Future of Web Apps в Лондон беше ThinkFree. Представлява инструмент за споделяне и съвместна работа по различни видове документи - текст, таблици и презентации. Претендира за пълна съвместимост в MS Office пакета. Най-интересното в цялата работа ми се видя viewer-а, който са направили. Безплатен е и дава възможност да постнеш на сайта си примерно екселска таблица и другите ще могат да я видят през браузъра без да е необходимо да иснтлират нищо или пък да имат Excel инсталиран на техния компютър. Много приятно. Още повече, че предлагат добра документация и API към услугата си.