Петър Илиев

Facebook marketing хитрости в блога на Иво Илиев

Fri, 24 Feb 2012 04:37:36 -0500

Facebook marketing хитрости в блога на Иво Илиев:

Сред широката аудитория цари мнението, че рецептата за успех във фейсбук е да имаме възможно най-голям брой фенове на страницата си. Аз поддържам теорията, че по-важно е колко са активни феновете ни. Facebook явно са на същото мнение, защото преди няколко месеца въведоха параметъра Talking About This. Линка отгоре води до една интересна статия в блога на Иво Илиев. Препоръчвам.

CoFounder.tv

Tue, 21 Feb 2012 09:09:00 -0500

CoFounder.tv:

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

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

Извод: Когато имаш идея просто действай! Не зацикляй в дизайн концепции и custom програмиране за конкретните нужди на проекта, особено ако програмирането не ти е силна страна. Някой в другия край на света има същата идея, инсталира един Wordpress с готова тема и след един час пуска сайта си.

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

Векторен уеб дизайн, част 2: CSS3, RGBa & SVG

Thu, 09 Feb 2012 04:50:00 -0500

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

CSS3

CSS3 ни дава възможност да създаваме графично богати елементи без да използваме картинки. Поддържа градиенти, сенки, заоблени ъгли и пр. За всички тези неща доскоро трябваше да се използват вложени дивове, преди това дори вложени таблици със зададени фонови растерни изображения. CSS3 поддържа дори анимации, без JavaScript.

Няма да влизам в чисто технически детайли, но все пак ако някой все още не е запознат с новите възможности на CSS, ето няколко полезни линка:

ColorZilla e много удобен генератор за CSS3 градиенти.
От CSS3.info можете набързо да се запознаете с различните възможности на CSS3, като например text-shadow, border-radius, box-shadow и т.н.
CSS3generator.com е супер лек генератор за CSS3 ефекти. Мега елементарен е, което го прави подходящ за ежедневна употреба. Аз го ползвам постоянно.
За да видите какви магии могат да се постигнат само с CSS разгледайте колекцията от лога на 1stWebDesigner. Всичките са правени само с HTML и CSS. (10x, Светослав Тодев)

RGBa

Това е супер дребно, но адски силно и важно. Можеш да дефинираш цвят, като освен самия цвят задаваш нивото му на alpha прозрачност. Изключително полезно е за сенки и бордери. Важно беше да го спомена, защото много често виждам сайтове, чийто дизайнери явно не го знаят. Ето един пример:

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

Сянката в примера е направена с box-shadow:0 3px 5px #d5d5d1;. Ако вместо солиден сив цвят колегите бяха използвали прозрачен черен ефекта щеше да е съвсем друг. Ето как би изглеждал същият хедър, ако цвета на сянката беше дефиниран с rgba(0,0,0,0.2). Това вече е истинска сянка.

SVG

SVG (Scalable Vector Graphics) е векторен графичен формат, базиран на XML, който поддържа векторни форми в солидни цветове и градиенти, вложени шрифтове и дори анимация.

Модерните браузери работят с SVG свободно, точно както и с GIF, PNG и JPG файловете. Можете да използвате векторен файл за фон или лого във вашият сайт. Можете да го манипулирате по всякакъв начин -той никога няма да се пикселизира, просто защото е векторен.

Популярните векторни редактори поддържат експорт до SVG, така че производството на графика е лесно.

Полезни ресурси:

Resolution independence with SVG от Smashing Magazine
Using SVG For Flexible, Scalable, and Fun Backgrounds е статия от две части в A List Apart, която ще ви разясни много неща около приложението на SVG файловете.

Това беше втората доза елементи на векторния уеб дизайн. Предстоят още няколко неща, така че ако не искате да изпуснете следващата част абонирайте се за RSS фиида ми или ме проследете в Twitter. Другата седмица идва част 3 :)

Векторен уеб дизайн, част 1: Адаптивен лейаут

Wed, 08 Feb 2012 07:18:00 -0500

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

За последните десет години уеб дизайна мина през много тенденции. Модерни бяха флаш сайтовете, модерни бяха splashscreens, чиято единствена функция беше да съдържат бутон “Влез в сайта”, модерни бяха свръхтежките графични гръндж сайтове, модерни бяха сайтове с така наречен web 2.0 дизайн - големи градиентски бутони, фонове с наклонени черти. Минахме през ерата на бевелските сайтове, в която се слагаше бевел и ембос на всяко нещо на което може да се сложи. Оцеляхме.

Сега идва една нова тенденция, наложена от новата post-PC епоха. Интернет вече не се консумира само с десктоп компютър. Ползват се всевъзможни смартфони, таблети, дори напоследък виждаме и таблетофони (или както там се наричат).

Новото потребителско поведение изисква нови решения когато проектираме даден сайт и съответно създава нова тенденция. Web вече е векторен.

Какво имам в предвид? Че вече не можеш да си сигурен с какво устройство те преглежда посетителя и ти трябва адаптивно решение, което да може да обслужва всички. За щастие, вече работим в ерата на модерните браузери и сме свободни да създаваме тези адаптивни решения без да се притесняваме, че при някой няма да работят. Под адаптивно решение визирам широк набор от техники. Ето кои са те, като разбира се започваме от най-важното…

Адаптивен лейаут

Течна структура на сайта, която се самоподрежда в зависимост от резолюцията на потребителя. Не е толкова сложно колкото звучи. Размера на текстовете се задава в em, ширината на колоните и блоковете се задават в проценти. До тук нищо ново.

Голямата полза от адаптивните лейаути идва когато искаме да променим коренно структурата на лейаута, не само ширината му. За пример давам новия дизайн на Smashing Magazine. Ако ширината на браузера е достатъчна главното навигационно меню е отстрани вертикално. При свиване се премества отгоре. При още свиване изчезва сайдбара и така докато цялата навигация не се набута в един дропдаун, който явно смятат за достатъчно удобен през смартфон.

Тези магии се случват с CSS3 media queries. Те работят по много прост и ефективен начин. С общи думи казано, представляват блокове CSS код, който се прилага само когато резолюцията е по-голяма или по-малка от даден брой пиксели.

Адаптивните лейаути са основата на новия векторен web. Ето няколко полезни ресурси по темата:

Responsive web design: What it is and how to use it от Smashing Magazine. Точно тях дадох за пример по-горе. Четете за responsive web design докато гледате един от най-добрите примери.
Ако за първи път чувате за адаптивен лейаут и ви е трудно да си представите какво означава на практика вижте 50 примера на добре направени адаптивни лейаути от DesignModo
Beginner’s Guide to Responsive Web Design от ThinkVitamin. Много качествен блог, техния дизайн също е адаптивен. Хванете ръба на браузера и го ресайзнете за да видите как се променя структурата на блога.
Ако предпочитате да четете на български, Жоро Ангелов предлага страхотен туториал за адаптивни лейаути.
По-широко разгърната темата ще намерите в книжката Responsive Web Design на A Book Apart. Аз я изядох за две вечери и горещо я препоръчвам.
Както често се случва в живота, не всички са привърженици на адаптивните лейаути. За десерт вижте 11 причини защо адаптивният уеб дизайн не е чак толкова готин.

Това е първата статия от поредицата ми за векторния уеб. Нямам намерение да изпадам в дълбоки технически детайли за всеки от съставните елементи. С тази поредица статии искам просто да ви дам тема за размисъл, затова ще бъда кратък, но пък ще се опитам да ви предложа най-добрите ресурси, от които да научите повече и да започнете своя по-дълбок research по всяка от темите. Понеже частите не са много дълги, ще ги публикувам на къси интервали. Утре идва втора част!

Има няколко много лесни начини да не пропуснете следващите части от поредицата. Единият е като се абонирате по RSS, другият е като ме проследите в Twitter.

"Asking me to sign an NDA before having coffee to discuss your startup idea is like me asking you to..."

Tue, 07 Feb 2012 03:46:49 -0500

“Asking me to sign an NDA before having coffee to discuss your startup idea is like me asking you to buy condoms before I meet your sister.”

- Ken Westin. Много яко.

С интерес следя предаването Foundation на Кевин Роуз. Интервютата винаги са с успешен предприемач,...

Wed, 01 Feb 2012 04:56:00 -0500

С интерес следя предаването Foundation на Кевин Роуз. Интервютата винаги са с успешен предприемач, който има какво да разкаже за пътя си до успеха. Видеото отгоре е най-новия епизод, в които гост е Кевин Систръм, основател на Instagram.

Един млад и амбициозен български стартъп - Buuk.me

Mon, 30 Jan 2012 09:24:04 -0500

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

Buuk.me е social bookmarking мрежа за продукти. За сега преобладават модните артикули, но се мяркат и други. Всички фешън маниаци вече имат своята зона за свободно споделяне, рейтинг и дискусии на продукти от любимите им марки. Добавянето на продукт става с пействане на линк към онлайн магазин, системата сама парсира картинка и заглавие. Предлагат и букмарклет за лесно споделяне с един клик.

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

Говорих си с фаундърите, с които имам удоволствието да се познавам от много време и мисля, че идеите, по които работят за бъдещите версии са доста интересни. Лесно намиране на най-харесваните продукти, сравнение на цени и магазини със социален layer, лесно следене на price-drops за любими продукти и пр. killer features, които ще изстрелят проекта напред.

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

В момента Buuk.me работи само на български, но като имам в предвид, че от фаундърите единия е във Виена, другия в Сан Франциско очаквам скоро да отворят английска и немска версия. Проекта е наистина интересен и макар лично аз да не съм fashion junky очаквам да се развие много добре. Успех :)

Btw, моят профил е тук, следете ме!

Крайно вероятно е вече да сте го гледали в TC, но е хилериъс, не се сдържах. Някои хора май са...

Sat, 28 Jan 2012 15:21:00 -0500

Крайно вероятно е вече да сте го гледали в TC, но е хилериъс, не се сдържах. Някои хора май са крайно изкривени.

Европа подписа ACTA

Thu, 26 Jan 2012 11:07:04 -0500

Европа подписа ACTA:

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

Днес 22 европейски държави, в това число и България са подписали ACTA. На печелившите - честито :)

За кого ще гласувам на Crunchies 2011

Sat, 21 Jan 2012 05:03:00 -0500

TechCrunch е MTV-то на нашата индустрия, а ежегодните награди Crunchies са като Оскарите. Разгледайте финалистите за 2011 и гласувайте за вашите фаворити. Ето за кои ще гласувам аз!

Facebook Timeline в категория Best Social Application. Facebook направиха нещо много оригиниално със своя нов проект Timeline. Излезнаха извън стандартните представи за това как трябва да изглежда и работи един личен профил. Много е хитро това, че можеш да добавяш събитията от живота ти, дори да са се случили преди да имаш Facebook. Персоналните cover images са много добра идея, защото добавят малка и ненатрапчива възможност за персонализация. Спомнете си сега MySpace… Нищо общо, нали?

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

Fab.com в категория Best Shopping Application. Fab направиха истински удар в социалното пазаруване. През 2011 счупиха всякакви рекорди за ръстеж и в момента имат 1.8 милиона акаунта.

Flipboard в категория Best Mobile Application. Flipboard правят social & RSS reader за нормални хора. Ако имате iPad задължително му хвърлете едно око. Аз ползвам iPhone версията за да чета новини и статии. Интерфейса е супер лек и балансиран. Едно от наистина любимите ми приложения и много се радвам, че са сред номинираните.

Airbnb в категория Best Location Application. Тези хора съсипаха хотелския бизнес. Ползвах Airbnb миналата година за разходката до Франкфурт и намерих нощувки в самостоятелен апартамент в центъра на града за 50€ при положение, че в най-смотания хостел до гарата цените започваха от 70€ за двама, представете си нормалните хотели. Скоро ми предстои едно ходене до Париж, където също намерихме супер оферта. Airbnb откриха страхотна ниша за милиарди, която запълват с пълна сила. И уебсайта и мобилното приложение са много пипнати. Услугата също е много добра.

Снимката отгоре е от срещата на домакините във Франкфурт. Двете момчета работят за Airbnb, те организираха събирането, а нашата домакинка, в чийто апартамент отседнахме ни покани. Подариха ни и на нас такива тениски :)

Не ползвам Pinterest, но ще гласувам за тях в Best Design, просто защото не мога да пропусна тази категория, поради разбираеми причини. Дизайна им е много хитро структуриран и като цяло много добър.

Rovio в категория Best International Startup. Няма как да не подкрепим фирмата дала на света Angry Birds, нали? Може би най-популярната casual игра в момента, един истински SuperMario на 21-ви век.

Twitter в категория Biggest Social Impact. Twitter бутат правителства и диктатори. Видяхте какво се случи в арабския свят през последната година. Не виждам кой може да постигне повече от това да помогне за постигането на свободата на цели народи.

Codecademy в категория Best New Startup of 2011. Мислех да напиша изцяло отделен блогпост за този стартъп. Codecademy е лесен и автоматизиран начин да се научиш да програмираш. Дават ти една конзола и прости инструкции какво да пишеш в нея. Уроците и инструкциите са така систематизирани, че лека полека разбираш какво е променлива, типове данни функции и т.н. към по-сложните неща. Изключително яко!

Трудно ми е да реша кой е моят фаворит в категория Best Overall Startup of 2011. Square направиха революция в мобилните плащания, като организираха супер иновативна екосистема за плащане с кредитни карти през iPhone и iPad. Tumblr ги ползвам за блога и страшно много ми харесва системата, но не мисля, че са предложили нещо революционно през последната година или поне не се сещам. Колкото и да са и симпатични, най-вероятно ще гласувам за Square.

Пропуснах няколко категории, защото не са ми интересни и/или просто нямам мнение в тази област. Вие за кой ще гласувате?

Античния театър в Пловдив. Автор: Studio 386

Thu, 19 Jan 2012 06:39:00 -0500

Античния театър в Пловдив. Автор: Studio 386

Usability for dummies: Златните правила на уеб ползваемостта

Tue, 17 Jan 2012 04:04:00 -0500

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

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

* * *

Жоро Йорданов е едва на 19, а вече е работил за Diema TV, MM TV, както и за клиенти от САЩ, Европа и Австралия. В момента участва в дизайна и разработването на платени WordPress теми, класиращи се сред първите 50 от общо 1400 в ThemeForest

Мислете като потребители - какво и по какъв начин сте свикнали да ползвате, и защо. Бъдете внимателни с преоткриването на UI колелото, за да не се окаже, че сте преоткрили единствено високия bounce rate. :)

Правете clickable зоните си максимално големи, където е възможно. В примера съм показал най-често срещания случай - навигация. Погледнато от front-end dev перспектива - просто замествате margin с padding и правите линк елемента блоков. По този начин улеснявате не само потребителите с тъчскрийн устройства, но и всички останали. В тази връзка - етикетите (label) на формите също трябва да се връзват с полетата, за които се отнасят - с цел увеличаване на clickable зоната.

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

Празното пространство (т. нар. white space или “въздух”) е полезно. Разполагайте елементите в уеб сайта така, че отново да имате ясна визуална йерархия. Нека лесно се разбира за даден елемент от кой друг е част или с кой друг взаимодейства. Мисля, че митът “Потребителите не обичат да скролират” не е верен, така че възползвайте се от неограниченото (най-вече вертикално) пространство, което ви предоставя уеб.

* * *

Иво Иванов е на 24г. от Велико Търново. Работи като уеб дизайнер на свободна практика от 4 години, разбира от Photoshop, Illustrator, HTML5, CSS3, UI design, mobile interfaces и НЕ Е заинтересуван от абсолютно никакви предложения за работа на заплата и работно време.

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

Съдържание. Царят! Потребителя влиза в даден уеб сайт, не за да се радва невероятния му дизайн (освен ако не е дизайнер :D ) а заради съдържането му. Дизайна не трябва да пречи на съдържането, а да насочва вниманието на потребителите към него (например с повече отстояние от другите елементи, с рамки и боксове и т.н) . Не прекалявайте с прекалено дълги текстове, разделяйте ги на параграфи, използвайте картинки, които да допълват текста и да привличат вниманието - потребителите първо разглеждат после четат. Ако има сходни секции добър подход е да се структурират в табове… например описание на продукт: описание | доставка | коментари | т.н.

Подредба и последователност. Дизайна трябва да е подреден и последователен, да се спазват отстоянията и грида, да се открояват важните елементи (заглавни ленти, “Call to action” бутони) от второстепенните (текстове, списъци и др.) или иначе казано да се спазва йерархия на отделните елементи и секции от дизайна.

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

Празно място. Не се чудете с какво да го запълните, а го използвайте за да предаде по добър фокус на важните елементи около него. Ако трябва да поберете много елементи в малко място, увеличете го така че пак да има празно място :)

* * *

Жоро Балинов е начело на Дизайн и Арт екипа в XS Software, където ръководи разработката на браузър базирани игри. Освен уеб дизайна, актуалните му страсти са лого дизайна, типографията и фотографията.

Стила ми на работа е минималистичен и за това основната мантра в дизайна за мен е “Less is more”. Старая се всички елементи и части от дизайна да имат конкретна функция и потребност, в противен случай са ненужни и дори пречат. Всички логични визуални решения са безкрайно прости и изчистени, те просто работят.

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

С навлизането на уеб шрифтовете се старая всеки нов проект да използва шрифтове от Google Web Fonts. До гуша ми е от до болка познатите шрифтове, ползвани в уеб страниците цяло десетилетие и се старая да ползвам новите шрифтове, като и не спирам да търся семплата и изчистена визия.

* * *

Цветелин Николов дълги години беше основния дизайн мозък в AtomSolutions. В момента работи по големи проекти в чужбина, като vcloud.tv и subs.tv.

Layouts / Grid: Да разбираме и ценим идеята на швейцарския грид, който е доказан с прецизността и гъвкавостта на швейцарско ножче.

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

Simplicity - Простота? “Добрият дизайн е… “, вече от всякъде чуваме как един дизайн трябва да е по-прост от молекулата на водата, но и до ден днешен правим сайтове пълни с безмислени facebook джаджи, twitter плугини, а вече и гугъл + благинки… Ако искате да стигнете до етап достъпност добре преценявайте добавките, който искате да имате, защото преди всичко е важно дали сайтът ще се зареди за по-малко от половин ден.

Формуляри - Страниците за обратна връзка или формуляри за получаване на жизнено важна информация са понякога решаващи за успеха. При наличието на минимални резолюции от 1024px е грехота да отделим 10% от екрана за най-важното! Правете формулярите ОГРОМНИ с добре изразени съобщения за грешки или успешно попълнени такива.

Типография - Ако Helvetica е парфюмът на града с трайна миризма над 50 години то би трябвало да има логично обяснение. Използвайте Helvetica. Шрифтът, който определено стой добре, когато го използваме в по-големи мерни единици, нещо, което определено ценя.

* * *

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

Ползваемостта е фундаментална стойност за реализирането на един успешен сайт. В скромната си 10 годишна кариера като дизайнер съм научил нещо много важно, което искам да споделя: „Добрия дизайн е субективна величина, но успешния проект не е”. А за да се реализира успешен уеб сайт трябва неговите посетители да работят лесно, интуитивно и да се чувстват добре ползвайки го.

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

Визуално отчетлив дизайн.

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

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

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

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

Вземете ли решение, придържайте се към него.

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

Мислете. Проектирайте. Създавайте адаптивни решения.

Годината е 2012 и адаптивните решения ще са основна тенденция през тази година, за това проектирайте сайтовете си така, че да са адаптивни за различните резолюции и устройства.

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

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

* * *

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

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

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

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

10 Useful Usability Findings and Guidelines от Smashing Magazine
25-point Website Usability Checklist от UserEffect
A Complete Guide to A/B Testing от WebDesignerDepot
How to Design a Great User Interface от WebDesignerDepot
и за да е пълен кефа списък с най-добрите usability блогове. Enjoy!

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

Благодаря на колегите за участието и се надявам, че сме били полезни. Успех :)

* * *

Edit: Крис постна своите препоръки за ползваемост в блога си. Някой друг престрашил се?

HTC-то ми се удави. След това реших да изчакам Apple да пуснат...

Mon, 16 Jan 2012 16:22:00 -0500

HTC-то ми се удави. След това реших да изчакам Apple да пуснат нов модел, за да се ориентирам кой да взема. Последваха около два месеца ходене по мъките с Globul и техните невероятни постижения в облатта на логистиката и обслужването на бизнес клиенти, но ето че най-после имам телефон. Този път заложих на iPhone. Btw, tumblr имат много добър application.

"People capable of making enough money to never work again are the same people who will never quit..."

Fri, 13 Jan 2012 08:16:03 -0500

“People capable of making enough money to never work again are the same people who will never quit working”

- Chris Dixon. Тази и още много добри мисли и цитати, свързани с уеб предприемачеството ще намерите в StartupQuote.

Best of Smashing Magazine Free eBook

Thu, 12 Jan 2012 03:56:00 -0500

Best of Smashing Magazine Free eBook:

През Септември миналата година един от любимите ми блогове Smashing Magazine стана на 5 години. По този повод пуснаха за безплатен download една е-книгна събрала в себе си най-добрите статии, публикувани в блога. В случай, че сте пропуснали книжката, исках да ви напомня, че все още можете да я свалите. Има интересни неща вътре.

Силно препоръчвам и другите им книги. Прочетох The Smashing Book #1 веднага щом излезе, беше супер добра, а #2 все още ме чака вкъщи да и обърна внимание.

От вчера Smashing Magazine имат нов дизайн. Най-после! Стария беше потресаващ.

Визо, между web бизнеса и киното

Tue, 10 Jan 2012 05:07:00 -0500

Визо, между web бизнеса и киното:

Велизар Величков е човекът, който организира и управлява търговката дейност на Grabo в София. Сайта, който го интервюира явно не се притесняват от печатните грешки, но все пак интервюто е интересен шанс да надникнеш за кулисите на нашия скромен стартъп.

Бързо, евтино и страхотно. Можеш да избереш само две....

Sat, 07 Jan 2012 03:35:00 -0500

Бързо, евтино и страхотно. Можеш да избереш само две. Фриленсърите ще ме разберат :) Картинката я откраднах от фейсбука на Пикасо.

Най-семплата работеща viral игра

Fri, 06 Jan 2012 05:51:00 -0500

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

Искам да споделя няколко прости логики, които следвахме:

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

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

Дизайна тук е доста важен. Направих го така, че да се фокусира вниманието върху късметчето и бутона за споделяне. Освен това бутона е съвсем custom, защото смятам, че стандартните бутони за споделяне във Facebook са груби, безлични и отблъскващи. Според мен доста по-малко хора биха ги кликнали.

Проектирай лесен път за вирусно разпространение. Потребител X тегли късметче → споделя във Facebook → потребител Y вижда споделеното късметче и го клика → лесно изтегля ново късметче → споделя го… И така лавинообразно се получава viral ефекта.

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

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

Това са 5-те прости правила, към които се придържах при разработката на коледната грабаница. 21027 грабомани изтеглиха своите късметчета. За сайт с посещаемостта на Grabo тази цифра не е извънземно огромно постижение, но като цяло класифицирам проекта като успешен. В последния момент преди да пуснем играта пулбично аз изтеглих първото късметче и го шернах. За десетина минути вече имаше 20 изтеглени късметчета, от мои facebook приятели. Тогава пуснахме трафик от сайта и до вечерта (след 3-4 часа) имаше над 1000 изтеглени късметчета.

Какво постигнахме с тази игра?

Провокирахме приятна емоция в 20 хиляди интернет потребители, свързана с нашия бранд.
Още няколко хиляди потребители видяха споделените късметчета с нашето лого, много от тях посетиха сайта ни.
Тъй като късметите можеха да се теглят само от регистрирани потребители регистрациите скочиха с около 400 на ден за периода, в който играта беше най-активна. Явно много потребители са се регистрирали специално за да грабнат късметче.
Бяхме единствения сайт в нашия сектор, който направи подобна коледна игричка. Още веднъж изпъкнахме пред конкуренцията.

Какво можехме да направим по-добре?

Не всичко беше 100% перфектно. Сещам се за 2 неща, за които ще внимавам повече при следващото подобно мероприятие.

Можеше тегленето на късметче да се прави с един клик по-малко. Адреса, който се шерва във фейсбук трябваше да е част от самата баница и тогава щеше да има една стъпка по-малко за теглене на ново късметче в случаите, когато потребителя е дошъл от Facebook.
Можехме да стимулираме по-активна комуникацията между потребителите с филтър за приятели. Ако имаше лесен начин да се филтрират само късметите, изтеглени от приятели щеше да има повече лайкове, коментари и пожелания между участниците. Трябваше да се облегнем на social layer-а на Grabo, но просто нямахме време за всички детайли.

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

Впрегни интернет да работи за теб

Thu, 05 Jan 2012 03:26:00 -0500

ifttt.com ви помага да поставите автоматизирани логически връзки между всички (повечето) уеб услуги и социални мрежи, които ползвате. Услугата е много странна, но може да се окаже полезна. Получили са $1500000 инвестиция, така че явно много хора намират смислено приложение.

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

Ако се появи нова статия в даден RSS feed изпрати автоматичен tweet.
Когато си променя снимката във facebook автоматично ми промени снимката и в twitter.
На 1-ви Януари точно в полунощ публикувай автоматичен пост във facebook/twitter със зададен текст.
Когато отбележа със звезда статия в Google Reader съхрания я автоматично в Evernote акаунта ми.

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

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

LittleBigDetails

Wed, 04 Jan 2012 03:58:00 -0500

LittleBigDetails:

LittleBigDetails е един мини блог, в който се публикуват малки, но важни UX детайли в популярни софтуерни системи - от сайтове, през мобилни и десктоп приложения до операционни системи. Детайлите, които публикуват са дребни, но са толкова хитри, че си казваш “Как са се сетили?”. Сетили са се, защото това им е работата.

На детайлчето отгоре се вижда как Flickr изписва на колко процента са качени снимките в title тага на документа, така че можеш да следиш прогреса докато браузваш други страници. Дребно, но адски хитро.