Видеото отгоре може би звучи малко фанатично, но ми се стори добре направено. ACTA е наследникът на SOPA и PIPA, американските проектозакони, които се сгромолясаха миналата седмица.
Днес 22 европейски държави, в това число и България са подписали ACTA. На печелившите - честито :)
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.
Пропуснах няколко категории, защото не са ми интересни и/или просто нямам мнение в тази област. Вие за кой ще гласувате?
Античния театър в Пловдив. Нямам представя кой е автора на снимката, иначе бих сложил линк.
Дори най-красивия дизайн на света е безсмислен ако не е лесен за ползване. Основната задача на всеки дизайнер, не само в уеб, е да направи продукта си лесен за употреба. В нашата сфера това е още по-важно, защото до голяма степен от това зависи успеха на проекта.
Поканих няколко колеги уеб дизайнери, които работят по много проекти от много години и реших да ги попитам кои са базовите правила и логически връзки, които правят един уеб интерфейс ползваем. Кои са тези елементарни, сами по себе си закони, които заедно формират науката уеб ползваемост. Ето техните мнения, подредени в реда, в който ги получих.
* * *
Жоро Йорданов е едва на 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то и моите няколко прости правила, които винаги спазвам. Аз ще заложа на наистина дребни детайлчета, които смятам, че внасят яснота в един дизайн и помагат на потребителя бързо да осъзнае какво се случва.
Да, повторих някои от правилата, споменати от колегите по-горе, но това само доказва колко са важни те. Съжалявам, ако статията е малко разностилна, нехомогенна и трудна за четене - това е защото са я писали 6 различни мозъка без да общуват помежду си.
Осъзнавам, че темата за уеб ползваемостта далеч не се изчерпва със съдържанието на тази статия. С нея просто скрачнахме повърхността. Важни са още много неща - скоростта с която се зарежда страницата, скоростта с която интерфейса реагира на командите на потребителя, контекста под който потребителя се е озовал на страницата и какво ли още не. Ето някои полезни линка на английски, с които да продължите човъркането си в тази тема:
Оставям коментарите отворени за още идеи за малки и големи правила, които спазвате когато проектирате даден интерфейс. Ако някой колега, който не е бил сред поканените иска също да разкаже нещо полезно може да използва коментарите или да напише свой блог пост - с удоволствие ще сложа линк от тук за да обогатим статията.
Благодаря на колегите за участието и се надявам, че сме били полезни. Успех :)
* * *
Edit: Крис постна своите препоръки за ползваемост в блога си. Някой друг престрашил се?
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 working
— Chris Dixon. Тази и още много добри мисли и цитати, свързани с уеб предприемачеството ще намерите в StartupQuote.
През Септември миналата година един от любимите ми блогове Smashing Magazine стана на 5 години. По този повод пуснаха за безплатен download една е-книгна събрала в себе си най-добрите статии, публикувани в блога. В случай, че сте пропуснали книжката, исках да ви напомня, че все още можете да я свалите. Има интересни неща вътре.
Силно препоръчвам и другите им книги. Прочетох The Smashing Book #1 веднага щом излезе, беше супер добра, а #2 все още ме чака вкъщи да и обърна внимание.
От вчера Smashing Magazine имат нов дизайн. Най-после! Стария беше потресаващ.
Велизар Величков е човекът, който организира и управлява търговката дейност на Grabo в София. Сайта, който го интервюира явно не се притесняват от печатните грешки, но все пак интервюто е интересен шанс да надникнеш за кулисите на нашия скромен стартъп.
Бързо, евтино и страхотно. Можеш да избереш само две. Фриленсърите ще ме разберат :) Картинката я откраднах от фейсбука на Пикасо.
Покрай миналите празници в Grabo направихме една viral игричка, която се оказа доста успешна. Идеята е проста, същевременно гениална - всеки потребител може да изтегли новогодишно късметче от виртуалната баница.
Искам да споделя няколко прости логики, които следвахме:
Измисли нещо, което потребителите искат, дори да не е нещо грандиозно. Късметчетата са доста прости за реализация, същевременно предизвикват любопитството у потребителя. Какво ли ще ми се падне? Всеки обича хубавите пожелания. Има органично желание у потребителя да грабне късметче. Наблягам на органично.
Измисли нещо, което потребителите биха споделили в социалните мрежи дори без да получават награда за това. Пада ти се нов Мерцедес от новогодишната баница и в следващия момент виждаш отчетлив син бутон “Похвали се във Facebook”. Най-нормалното нещо е да го цъкнеш и да споделиш приятната емоция.
Дизайна тук е доста важен. Направих го така, че да се фокусира вниманието върху късметчето и бутона за споделяне. Освен това бутона е съвсем custom, защото смятам, че стандартните бутони за споделяне във Facebook са груби, безлични и отблъскващи. Според мен доста по-малко хора биха ги кликнали.
Проектирай лесен път за вирусно разпространение. Потребител X тегли късметче → споделя във Facebook → потребител Y вижда споделеното късметче и го клика → лесно изтегля ново късметче → споделя го… И така лавинообразно се получава viral ефекта.
Не прави нещата прекалено сложни. Както знаем от дебелите книги за уеб ползваемост всяка стъпка бута конверсията. Всяко решение, което потребителя трябва да вземе отказва част от потребителите, които правят това, което искаме да направят. Затова се спряхме на късметите - теглят се с кликване на един бутон и тайминга е перфектен - покрай празниците.
Играта няма да сработи без начален тласък. Когато публикуваш своята игра постарай се бързо да вкараш първите потребители, който да предизвикват първоначалното шерване.
Това са 5-те прости правила, към които се придържах при разработката на коледната грабаница. 21027 грабомани изтеглиха своите късметчета. За сайт с посещаемостта на Grabo тази цифра не е извънземно огромно постижение, но като цяло класифицирам проекта като успешен. В последния момент преди да пуснем играта пулбично аз изтеглих първото късметче и го шернах. За десетина минути вече имаше 20 изтеглени късметчета, от мои facebook приятели. Тогава пуснахме трафик от сайта и до вечерта (след 3-4 часа) имаше над 1000 изтеглени късметчета.
Не всичко беше 100% перфектно. Сещам се за 2 неща, за които ще внимавам повече при следващото подобно мероприятие.
Надявам се да се появят колеги, задълбали по-надълбоко от мен в интернет маркетинга, които да се включат с още идеи и полезни съвети при организация и реализация на подобни viral игрички. Коментарите са отворени за включвания!
dribbble delicious instagram google+ grabo quora