Blogoreader – українська блогосфера та інтернет » Дизайн

10 найгірших юзабіліті проблем, яких треба уникати

Сергій Пішковцій — Wed, 25 Nov 2009 21:10:00 +0000

За підтримки: красивые подарки для вашей семьи, кондиционеры остудят жару вашего дома

Вже досить тривалий час я активно користуюсь інтернетом. І серед відвіданих мною сотень, навіть тисяч сайтів часто зустрічаються відверті помилки, які негативно впливають на user-experience, тобто враження користувача. Одне діло, якби їх припускалися окремі сайти, але коли так роблять тисячі, і ці проблеми стають вже скоріше правилом, ніж винятком, то вони дійсно починають дратувати.

Я вирішив описати кілька таких помилок юзабіліті. Слідкуйте за тим, щоб їх ніколи, повторюю, ніколи не було на ваших сайтах чи блогах. Інакше ваші відвідувачі будуть дуже незадоволені через таке поводження з ними.

1. Відкриття посилань у нових вікнах.

Користувач має право сам вирішувати, як відкривати йому конкретне посилання – у новому вікні чи в тому самому. Це право можна вважати аксіомою, адже свобода взаємодії – це те, що відрізняє інтернет як середовище від усього іншого. Відкриваючи посилання в новому вікні ви не лише позбавляєте відвідувача цієї свободи, а й нав”язуєте йому власні “правила гри”, змушуючи браузер поводити себе інакше.

Це саме, але з ще більшою категоричністю, стосується так званих pop-up вікон (тих, які відкриваються взагалі без згоди користувача і зазвичай містять рекламу). Завдяки сучасним браузерам можна заблокувати їх поширення. Однак поп-апи завжди залишаться ознакою брудного сайта-невігласа, який нехтує своєю аудиторією.

Вирішення: встановіть у опціях свого текстового редактора або в настройках CMS відкривання посилань у тому ж вікні (). За умовчанням цей параметр є саме таким.

2. Дрібний текст.

Шановні розробники сайтів, от скажіть, вам дійсно зручно читати тексти ось таким ось дрібнесеньким шрифтом?

Такі тексти – пережиток веб-дизайну дев”яностих, коли монітори мали роздільну здатність не більше 800х600. Вже десять років пройшло, у половини людей монітори з діагоналями більше 20 дюймів, …а кляті мікроскопічні шрифти залишились! Знову ж таки, сучасні браузери дозволяють відмасштабувати текст і картинки до потрібного рівня читабельності, але потрібно боротися з причиною, а не наслідком!

Встановлюйте базовий розмір тексту на вашому сайті не менше 1em. Не бійтесь використовувати “великокаліберні” шрифти для заголовків – це насправді виглядає круто та зручно. Для цього є всі необхідні технології та інструменти, досить їздити на паровозах!

Вирішення: всього один рядок в стилях CSS дає можливість змінити базовий розмір шрифта на сайті:

* { font-size: 1em; }

3. Pop unders, flash, та інша набридлива реклама.

Ще одна ознака “брудного” сайту, який не гребує використовувати найжахливіші технології задля власної вигоди. На жаль, такі набридливі банери час від часу можна зустріти і на провідних “білих” сайтах – у вигляді флеш-банеру, який можна безпечно закрити, однак враження (UX) все одно залишиться неприємне. Найбільш проблемні випадки – це коли при натисканні кнопки “закрити” (зазвичай у вигляді хрестика) вас нагло дурять, відкриваючи рекламу у вспливаючому вікні. Не знаю, наскільки прибутковим є розміщення такого банера, але прокляття в сторону сайту гарантовані.

Поглянемо на кілька зразків такої реклами:

Вирішення: притримуйтесь моральних правил реклами – не обманюйте відвідувачів після того, як вони вирішать закрити рекламний банер. Набагато ефективнішим буде використання так званого рекламного “кутика”, який користувач може відкрити, коли сам захоче.

4. Еротика.

Не розміщуйте на своєму сайті зображень еротичного характеру (звісно, якщо це не є його основною темою) будь-якого розміру. Питання моральності полягає не в тому, що на ваш сайт можуть зайти діти. Порно вони і так знайдуть, якщо захочуть. А от з точки зору естетики буде дуже негарно, якщо випадково посеред екрану вилізе величезна дупа чи гола цицька Поряд з вашими читачами можуть опинитися інші люди, які можуть не так зрозуміти випадковість цієї ситуації

Будьте уважні, коли встановлюєте на свій сайт інформери чи віджети від сторонніх ресурсів. Вони з радістю можуть показати вашим відвідувачам матеріали еротичного або, ще гірше, порнографічного характеру, і в той час же будуть стверджувати, що нічого такого не було.

Приклад із власного досвіду – інформер RedTram на Блогорідері неодноразово показував голі сраки, хоча його тематикою мали би бути категорії Бізнес і Технології. Техпідтримка трафікогенератора запевняла мене, що нічого такого не може бути, і взагалі, компанія так не робить. Але після того, як один з моїх читачів надіслав мені ось цей скріншот, я зрозумів, що робить, і дуже часто:

Після цього випадку я назавжди видалив інформер RedTram з свого блогу.

Вирішення: Уважно слідкуйте за графічним наповненням власного сайту. Не допускайте розміщення там неадекватних зображень чи “брудних” інформерів – бережіть свою репутацію.

5. Музика або відео на бекграунді.

Чи бувало у вас таке: заходиш на сайт, а тут тобі як бабахне музика з колонок! Ось і я про що – цей випадок чистий приклад поганого UX. Ви знову позбавили користувача свободи вибору, знову порушили аксіому інтернету.

Те саме стосується відео – воно не має починати програватись саме по собі. І навіть завантажуватись не має права при відкритті сторінки – хіба користувач знає про це? Уявіть що б було, якби всі вставлені відео з Youtube автоматично починали вантажитись. Особливо у відвідувачів з повільним з”єднанням.

Поганий приклад – сайт Руслани, при заході на який починає одразу грати музика.

Вирішення: якщо ви все одно хочете, аби в браузері програвалась музика, не вмикайте її за умовчанням. Покладіть спеціальну кнопку, нехай користувач сам увімкне програвач. Вимкніть завантаження відеопотоку без відома користувача.

6. Капча – це зло!

~~Британські вчені встановили~~ Шкідливість використання капч (засобів захисту від спаму) для вашого бізнесу доведена на практиці. Тому не варто тішити себе думками, що, поклавши капчу, ви назавжди позбудетесь спаму. Так, можливо спам дійсно перестане турбувати вас, але разом з ним можуть зникнути і ваші відвідувачі, яким набридне вдивлятися у перекреслені цифри та букви, щоразу, коли вони захочуть залишити відгук про ваш товар чи послугу. Для боротьби зі спамом існують десятки успішних інструментів, які не створюють ніяких додаткових вимог для ваших клієнтів (наприклад, Akismet). Тому замість того, щоб боротися з вашими відвідувачами, полегшіть їм життя на вашому сайті.

Ось, наприклад, один з таких феєричних прикладів:

Вирішення: вимкніть капчу на вашому сайті. Вона може бути у вигляді окремого плагіна, в такому разі ви зможете зробити це самостійно, або ж зверніться за допомогою до розробника сайту.

7. Неявні посилання.

Інтернет – це не проста викладка матеріалу, як у газетах, чи білбордах. Інтернет – це взаємодія. Покажіть користувачам, на що можна клікнути, а на що ні. Коли весь контент сайту поданий однаково, відвідувач губиться у ньому, і не може зрозуміти, що з цього всього є текстом, що є зображенням, а що є посиланням, на яке можна клікнути.

Негативний приклад: інтернет-магазин Інтератлетика. Вгадайте, де на наступному скріншоті є посилання:

Ну як? Зрозуміли щось? А посиланнями були ті елементи, які обведено червоним:

Ось так. Цікаво би дізнатись статистику, скільки відвідувачів цього магазину клацали не на те що треба, та на жаль, таку статистику ніхто не веде.

Вирішення: зробіть всі посилання на своєму сайті як мінімум підкресленими і як максимум з hover-ефектом, коли посилання міняє свій колір чи стиль при наведенні курсора на нього.

a { text-decoration: underline; }

8. Подробнее… Подробнее… Подробнее…

Мабуть, кожен другий сайт уанету не нехтує таким поширеним прийомом, як супроводження кожної новини лінком Подробнее (або Детальніше), і таких слів може бути підряд штук 10 або 20, в залежності від величини і щільності інформаційного потоку. Не повторюйте цієї помилки – це також один з пережитків дизайну 90-х. В сучасному веб-дизайні такому прийому не місце.

Вирішення: приберіть посилання Подробнее з вашого шаблону. Натомість нехай кожен заголовок, виділений тегом

,
і буде цим самим посиланням на новину.

9. Текст без абзаців.

З цього приводу в інтернеті вже існує спеціальний мем – “многабукв”. Тексти, які подаються без розбиття на абзаци, не те що важко, їх просто не хочеться читати взагалі. Людина сканує інформацію частинами, і такий великий шматок просто “застрягає в горлі”, і відвідувач покидає сторінку, щойно побачить її.

Вирішення: розділяйте тексти на своєму сайті на абзаци, оптимально – по 3-5 речень у кожному. Використовуйте підзаголовки, щоб читач зміг швидко зрозуміти, про що йдеться.

10. Дикі кольори.

Деякі розробники люблять особливий вид знущань над своїми відвідувачами – дизайн несумісних, диких кольорів, від яких очі вилазять на лоба, а текст прочитати більше одного рядка просто неможливо. Ось яскравий приклад такого сайту, де на чорному фоні салатовим та голубим кольором набраний текст:

Вирішення: Найбільш читабельним залишається чорний текст на білому фоні – і лише так, а не навпаки. Білий текст на чорному фоні шкідливий для зору, спробуйте зменшити контраст, надавши такому дизайну світло-сірий колір тексту. У будь-якому випадку не завадять базові знання з сумісності кольорів.

Сподіваюсь, мої поради та досвід допоможуть і вам при створенні нових сайтів. Ви можете навіть роздрукувати головні пункти цієї статті, і повісити собі перед очима, щоб завжди мати їх на увазі. Головне – пам”ятайте про своїх відвідувачів! Вони – найцінніше, що у вас є.

Збільшення онлайнових продажів: вирішуємо проблеми юзабіліті

Сергій Пішковцій — Sun, 08 Nov 2009 22:23:00 +0000

Автор статті: Кевін Голеш (Kevin Holesh)

При розробці інтернет-магазину вам доведеться враховувати багато різних типів клієнтів: постійні клієнти, відвідувачі, що завітали до вас вперше, або просто випадкові гості. Одна річ, яка допоможе їм всім – це оптимальна зручність. Ви можете досягти цього різними шляхами, починаючи з найбільш загальних проблем. Вирішення восьми найбільш поширених проблем юзабіліті допоможе стати вам на шлях ідеального user-experience та збільшити продажі.

1. Прихований пошук

Жорстка інформаційна структура може робити чудеса для людей, які люблять інтернет-серфінг, але деякі клієнти просто хочуть знайти продукт, купити його та вийти. Ці люди є пошуково домінуючими: як тільки вони завітають на ваш сайт, то почнуть шукати. І якщо вони не знайдуть пошукового рядка, то підуть геть. Як все просто.

Хорошим прикладом помітного пошукового рядка є той, що використовується на сайті Overstock.com. Це друге, що я помітив на головній сторінці, через свій розмір, розміщення та домінуючу червону рамку.

Уявіть собі, що, повертаючись додому з роботи, ви завітали до магазину придбати трохи кедрових горіхів, щоб приготувати всесвітньо відомий соус песто. Горішки можуть бути де завгодно, тому вам варто спитати в персоналу, де їх можна знайти. Але, оглянувшись навколо, ви не бачите продавців. Розчаровані та з пустими руками, ви йдете. Потенційні клієнти, які не зможуть знайти засобу для пошуку на вашому сайті, почуватимуть себе так само.

Як це виправити

Зробіть ваш пошук більш помітним і тримайте його у визначеному місці. Не обов”язково, щоб він був такий самий великий, як на Overstock, але відвідувачі, скоріш за все, будуть шукати його у верхньому правому кутку. Також переконайтесь в тому, що елементи дизайну, які розміщені біля пошуку, не порушують його функціональність. Це стосується і сторінок з результатами пошуку.

2. Марні результати пошуку

Це виникає як наслідок вищевказаних думок. Відвідувачі, які використовують пошук, хочуть знайти, що вони шукають, швидко. Скоріш за все, вони шукають специфічний продукт або особливість продукту, яка не вказана в головних категоріях сайту.

Коли я шукаю “blue”, ModCloth робить прекрасну роботу, показуючи мені позиції, які… ну, blue! Це звучить просто, поки ви не помітите, що слово blue не вказане у назвах або описах продуктів. Схоже, що сайт використовує якусь магію, щоб показати мені лише блакитні товари (насправді, скоріш за все використовується система тегування, і коли ви шукаєте блакитне, всі товари з цим тегом знаходяться… але все одно!).

Як це виправити

Підтримуйте виправлення опечаток. Подивіться, як це робить Google:

Зробіть сторінку з “нульовими результатами” зрозумілою та додайте альтернативні пошукові запити. Приклад: eBay не лише припускає, щоб я перефразував запит, а й подає мені схожі приклади.

Небажані пошукові результати зазвичай відсіюються на боці сервера. Це може бути складною роботою, і вимагатиме окремого підходу. Ви можете почати з пошуку у ваших логах, щоб побачити, що люди шукають. Об”єкти, які потребують поліпшення, варто підвищити у видачі.

3. Замало продуктів на кожній сторінці

Метою будь-якого інтернет-магазину є продати якнайбільше товарів, і хороший спосіб збільшити продажі – це збільшити кількість продуктів, які переглядає кожен відвідувач при кожному візиті. Коли ви перебуваєте в продуктовому магазині, ви маєте свободу вибору щодо стількох товарів, скільки схочете.

Ми втрачаємо цю свободу, коли купуємо онлайн. Ми стикаємося з цією чужою концепцією “сторінок”. Ми можемо переглянути водночас лише одну сторінку, а щоб перейти до наступної, треба клацнути на посилання. Це означає більше дій для ваших користувачів, а тому краще дати їм можливість переглядати більше товарів за один раз. Це зменшує бар”єр “наступної сторінки” і спонукає їх серфити більше.

Водночас ви ж не хочете перевантажити відвідувачів занадто великою кількістю продуктів. Додавання більшої кількості товарів це ніби збільшення довжини проходу в магазині. Ви ж не хочете перетворити мандрівку магазином у перехід через футбольне поле?

Як це виправити

Додайте більше товарів до кожної сторінки, але попередньо встановіть їх природу. Ваші продукти візуальні? Чи технічного характеру?

Коли ви шукаєте на iStockPhoto “beach“, то результати майже на 100% візуальні, що скорочує паузу між переглядом і покупкою. Не так багато йдуть порівнювати продукцію як тільки ви продивились зображення. Якщо ваші товари скоріш за все візуальні, то чим більше їх буде на сторінці, тим краще. Приблизно від 50 до 100 буде нормальним.

З іншого боку, якщо ваші товари вимагають технічних пояснень, то зменшення їх кількості на сторінці до 15-20 буде найкращим рішенням. На Best Buy покупці можуть порівняти камери, не відчуваючи себе перевантаженими або загубленими у морі мегапікселів та розмірів LCD-дисплеїв.

4. Малі навігаційні посилання

Зробіть посилання на ваші сторінки більш юзабельними шляхом збільшення області, де можна клікнути. Це знижує бар”єр між сторінками, про який я казав і спонукає відвідувачів переглядати більше продуктів.

Здається, що область кліку на зображенні вище велика, але насправді посилання міститься лише за самою цифрою. Це плутає відвідувачів і робить навігацію складнішою. Таким чином, вони змушені думати про те, як втрапити курсором на лінк, що є дуже негативним моментом у користувацькому досвіді.

Найкращим прикладом навігаційних посилань, я вважаю, володіє Flickr. Хоча це і не інтернет-магазин, але він використовує ту саму концепцію. Ці лінки мають велику активну область, яка обведена сірим кольором. Вони також зміцнюють бренд Флікра, оскільки використовують фірмові кольори, щоб відвідувачі знали, на якій сторінці вони зараз, і на яку сторінку можна перейти.

Як це виправити.

Збільшити область кліку у ваших посиланнях можна за допомогою лише одного рядка в стилях CSS:

.pagination a {padding: 4px;}

В якості польового тесту, відкрийте свій сайт на iPhone і спробуйте натиснути на ці посилання пальцем. Якщо вам це не вдається, то потрібно додати трохи простору навколо посилань.

5. Неінформативні сторінки продуктів

Коли ваші клієнти надсилають один одному посилання на сторінки вашого сайту, то вони повинні знати, що це за продукт, ще до того, як натиснуть посилання.

Я маю на увазі такі лінки, як http://www.ecrater.com/product.php?pid=5540041; якщо ви отримаєте такого лінка поштою, ви уявлення не матимете, на що він посилається. Набагато більш user-friendly виглядають посилання типу http://www.ecrater.com/products/kodak-slide-projector. Коли клієнти мають можливість бачити назву продукту, то це стимулює їх до кліку.

Дружні URL покращують ваш рейтинг в очах пошуковиків, оскільки вони дають пошуковим ботам більше інформації про те, що знаходиться на конкретній сторінці. Якщо покупець шукає хромований змішувач для кухні (chrome faucet), то при правильних URL ви маєте більше шансів, що клієнт прийде до вас:

Amazon робить прекрасну роботу у цьому напрямку. Взяти хоча б для прикладу наступне посилання: http://www.amazon.com/Crush-Time-Cash-Your-Passion/dp/0061914177/

Назва книги йде одразу після amazon.com. Це дозволяє відвідувачам підтвердити, що вони на вірному шляху, всього лише один раз глянувши на лінк. Посилання на Амазоні могли би бути ще більш дружніми до користувачів, якби не містили набір чисел в кінці. Але компанія як і раніше робить чудову роботу, з огляду на те, що в їх каталозі – тисячі продуктів.

Як це виправити

Додавайте назви товарів на початку ваших лінків, використовуючи user-friendly схеми за прикладом Crush-Time-Cash-Your-Passion.

6. Примусова реєстрація для здійснення покупок

Коли клієнт хоче купити у вас товар, йдіть геть з дороги, у всіх сенсах цього слова. Люди хочуть витратити зароблені ними гроші!

Одним з шляхів перешкодження цьому є вимагання реєстрації перед тим, ніж клієнт зможе щось купити. Це зазвичай використовується, щоб відслідковувати деталі покупок та робити все більш зручним для майбутніх продажів. Це все добре, поки ви не зрозумієте, що це – суттєвий бар”єр між покупцем та сторінкою для підтвердження продажу. Фінішна пряма – це найгірше місце, де ви можете стати на заваді вашим клієнтам.

Не вірите? Почитайте як Амазон збільшив свої продажі на $300 млн (так, 300 000 000 доларів), просто змінивши одну кнопку в процесі покупки.

Як це виправити.

Замість того, щоб примушувати ваших клієнтів реєструватися під час процесу покупки, розкажіть їм про зручності реєстрації. Підкресліть переваги, підвищену безпеку і можливість виявлення шахрайства при реєстрації на сайті. І вони зможуть зробити власний вибір.

7. Реклама в магазині

Показуючи рекламу у вашому інтернет-магазині вказує відвідувачам на те, що ви намагаєтесь вичавити з них все до останньої копійки. Реклама відволікає від основної мети магазину – продавати товари, які подобаються відвідувачам.

Коли я вперше завітав на сторінку з фотоапаратами на Buy.com, перша річ, яку я побачив – це був не перелік камер, а флеш-анімований банер від Sidekick. Ігнорування реклами і концентрація уваги на цифровиках – нелегкий процес. Я прийшов сюди, щоб купити камеру, але це заважає мені.

Виявляється, деякі магазини навіть посилаються в рекламі на своїх головних конкурентів. Уявіть собі, що ви є власником справжнього офлайнового магазину. Чи дозволили б ви вашим конкурентам рекламуватися поруч з місцем, де ви продаєте свої камери? Розміщення рекламних оголошень на сайті виглядає так само.

Не плутайте це з промо ваших власних продуктів, коли показуються товари схожі на той, який переглядає відвідувач. Реклама не просуває ваші власні продажі, зате розкручує ваших конкурентів, даючи вам натомість 5 чи 10 центів.

8. Маркування відсутніх товарів

Якщо клієнт платить за товар лише тому, щоб забрати його колись пізніше, то він не буде радий цьому. Він або скасує замовлення, або звернеться до сервісної підтримки, щоб поскаржитись. Нехтуючи скаргами користувачів, ви погіршуєте загальне враження від свого проекту.

Як це виправити

Будьте попереду відвідувачів. Повідомте їх про наявність чи відсутість товарів, щоб вони могли прийняти рішення щодо покупки.

ModCloth одразу показує відвідувачам на сторінці з переліком товарів про їх доступність. Якщо товар закінчується, дружнім оранжевим кольором (а не гарячково червоним) виводиться інформація про кількість товарів, що залишилась. Це дозволяє користувачам швидше приймати рішення щодо покупки, але водночас не дратує їх. Якби в повідомленні мовилось: “Наші запаси вичерпаються за 19 хвилин”, то я би почував себе спеціалістом зі знешкодження бомби у фільмі Місія нездійсненна. У вас немає причин, щоб сіяти паніку серед ваших клієнтів.

ModCloth також повідомляє мені, якщо товар вже продано. Це перша річ, яку я бачу при перегляді сторінки з продуктом. Окрім того, я можу підписатися на оновлення, і дізнатись першим, коли товар з”явиться у продажу.

Висновки

Метою користувацького дизайну (UI Design) є потреба зробити сайт простішим для використання. Для інтернет-магазинів, виправлення цих проблем приносить більше відвідувачів, які роблять більше переглядів для більшої кількості товарів і на довший період. Навіть прості поправки, як-от, відміна реєстрації на сайті, може справити величезний вплив. Майте на увазі ці найпоширеніші проблеми, коли будете розробляти дизайн магазину наступного разу. Ваші клієнти віддячать вам за це.

Джерело статті: Increasing Online Sales: Simple Usability Problems To Avoid, Smashing Magazine

Переклад і оптимізація українською мовою: Сергій Пішковцій, Blogoreader

Офіс майбутнього: тренди та новинки

Сергій Пішковцій — Wed, 30 Sep 2009 21:13:18 +0000

Офісний простір протягом останніх 50 років не зазнав суттєвих змін. Поліпшення відбуваються, в основному, у сфері технологічного забезпечення. Сама ж структура і досі майже всюди однакова. Але ні технології, ні дизайн, не стоять на місці. Якими ж будуть наші робочі місця у майбутньому?

Сьогодні ми спробуємо дізнатись, як саме трансформується процес праці, і які тренди є найпопулярнішими у цій сфері. Для початку зберемо всі тренди та тенденції в один список.

Екологія

екологічно безпечні матеріали та техніка
впровадження електронного документообігу без використання паперу
технологічні рішення по мінімізації витрат води та палива
збільшення ефективності теплового режиму – ізоляція та утеплення приміщень

Технології

використання джерел альтернативної енергетики – сонячні панелі, вітрові турбіни
впровадження енергозберігаючого освітлення

Техніка

Бездротова передача даних (Wi-fi, Bluetooth)
сенсорне управління (Microsoft Surface)
подвійні монітори
бездротові аксесуари (миші, клавіатура)

Меблі

багатофункціональні та гнучкі зразки
персональні робочі станції

Після такого вражаючого переліку навіть офіс серед лісу вже не викликає здивування.

Введення повного електронного документообігу значно полегшує проблему зберігання, систематизації та зберігання інформації. Так званий безпаперовий офіс – цілком можлива реальність, яка вже зараз використовується на практиці у деяких компаніях. Кошти, що раніше витрачались на папери, тепер підуть на створення баз даних, та підтримки їх надійності.

Одним з провідних трендів майбутнього офісу має стати енергоефективність та економія. Такого роду витрати часом з"їдають чималі кошти при обслуговуванні офісів з великою кількістю працівників. І, що найцікавіше – ці технології можуть бути використані вже сьогодні, і навіть в Україні. Досить обзавестися енергозберігаючими лампами та ретельно попрацювати над ізоляцією і утепленням приміщень. Більш потужні компанії, особливо на Заході, можуть дозволити собі впровадження альтернативної енергетики у свої будівлі.

Також стає популярною концепція персонального робочого місця, повністю автономного та мобільного. Однак вона, хоч і виглядає досить привабливо, у масовому порядку все ж не настільки вигідна, як у специфічних випадках.

Зображення: Tuvie

Microsoft Surface – мультифункціональний пристрій, що нагадує звичайний стіл, на сенсорній поверхні якого і здійснюється все управління. Носить скоріше розважальний характер, але не виключено, що така розробка буде взята на озброєння і для інших сфер діяльності, в тому числі й офісної.

Ще один вражаючий проект від Майкрософт, який був презентований буквально цього літа, отримав назву NATAL. Він являє собою мультимедійну новацію у сфері розпізнавання людських рухів, голосу, жестів. Розказувати все, що він можеє – дуже довго, тому краще одразу подивитись відео. Захоплення та враження гарантовані

Корисні посилання:

Звісно, перелік технологічних новинок та прогнозів можна продовжувати ще довго. Але наскільки реальними є дані пропозиції? Чи використовується щось новітнє на вашому робочому місці?

Дизайн чи контент? 7 аксіом створення сайтів

Сергій Пішковцій — Sun, 17 May 2009 21:37:48 +0000

І знову ми повертаємось до одвічної дилеми: хто важливіший – дизайн сайту чи його контент?

Досить тривалий час досліджуючи це питання, я дійшов до кількох головних висновків, якими хочу поділитися з вами. Думаю, ці підсумки стануть в нагоді всім, хто займається розробкою сайтів або ж просто є зацікавленим у цьому процесі.

1. Дизайн завжди відходить на задній план, коли контент має вирішальну роль. Вам буде абсолютно все рівно, що шрифт на сайті занадто мілкий, а палітра кольорів – занадто яскрава, якщо на цьому сайті буде знаходитись така конче необхідна вам інформація. І ця істина беззаперечна.

2. Відвідувачі запам"ятовують сайт за його змістом, а не за його дизайном. Зокрема, у абсолютній більшості випадків це саме так. Тому як би ви не старались прикрасити свій сайт різними "рюшечками", відвідувачі все рівно йтимуть за контентом, а не за дизайном. Інколи навіть найстрашніші у плані дизайну чи юзабіліті блоги мають немалу популярність.

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

3. Не намагайтесь довести перевагу вашого дизайну над контентом. Відвідувачі йдуть читати текст, як мінімум, а не дивитись на гарні картинки. Навіть якщо й останнє – то це навряд чи повториться багато разів. Справді гарний дизайн повинен не заважати, а навпаки, лише ефективно допомагати користувачу знаходити необхідну інформацію. Зробіть його засобом, а не метою. І нехай цей засіб існує разом з контентом на принципах паритету.

4. Дизайн – не лише гарне полотно чи красива рамка для вашого сайту, а інструмент, через який відвідувач взаємодіє з сайтом. Постарайтесь, щоб цей інструмент був корисним для людей, а не навпаки.

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

6. Не намагайтесь закрити шикарним дизайном убогий контент. Ваші відвідувачі про це одразу ж довідаються, тому підсовувати їм кольорові фантики нема сенсу.

7. І в той же час не приносьте дизайн в жертву, роблячи вигоду заради сайту – краще зверніться до пункту 5.

Корисні посилання:

Спонсори випуску: siam hotel тренинг коммуникации аренда яхт в одессе

Користь зображень для вашого сайту

Сергій Пішковцій — Tue, 05 May 2009 22:51:50 +0000

Людей хлібом не годуй, а лиш дай картинки подивитись. І справді, цей воістину революційний засіб виправдовує себе на всі сто: зображення є каталізатором уваги для ваших читачів. Отже, що саме зможуть зробити зображення на вашому сайті?

З позитивних речей починати приємніше. Розглянемо основні.

Безперечно, графіка – це ще один спосіб урізноманітнити та покращити дизайн вашого сайту. У світі практично не існує цікавих дизайнів, котрі не використовують зображень. Важко оцінити її вплив на розвиток веб-дизайну – бо він є вражаючим. Так само вражаючим може стати і ваш сайт, якщо у нього буде сучасний та гарний дизайн.

Свої інфографічні властивості графіка показує, коли стає не просто частиною дизайну, а частиною статті, невід"ємним цілим поданого матеріалу. Від найпростіших – схем, діаграм, та до більш складних – високоякісних інфографік, котрі містять у собі поєднання фотоматеріалів, таймлайнів, графіків, та багато іншого, покликання якого одне – дати читачеві повну інформаційну картину ситуації.

Графіка перестає бути доповненням – вона може стати основою контенту! Досить згадати хоча б фотоблоги – без чудових фотографій вони – ніщо. Публікуючи якісний фотоконтент ви даєте можливість своїм читачам отримувати інформацію, котра подана для них у спрощеному вигляді – адже її не треба "пережовувати" – зображення – це мова емоцій. В цьому і ховається успіх популярних фотосайтів, наприклад, Flickr – там зображення це не тільки хобі чи професія, це вже скоріше елемент натхнення.

Як відомо, людина під час читання чи проглядання якихось матеріалів рухається стрибкоподібно, переглядаючи їх "по діагоналі", вловлюючи лише найважливіші, на її думку, моменти. Ясна річ, що графіка має більше шансів звернути на себе увагу, ніж текст. Особливо, якщо вона цікава і безпосередньо стосується теми статті. Тобто робимо висновок – використовуючи зображення в якості ілюстративного чи додаткового матеріалу до основної частини контенту, наприклад, тексту, ви маєте більше шансів довше втримати увагу читача.

Більше того – зображення є вигідними не тільки в плані людей, а й у плані… роботів. Вміло використовуючи ключові слова сторінки та ретельно прописуючи їх до кожного більш-менш важливого зображення на своєму сайті (в параметрі alt=""), ви "ризикуєте" звернути увагу пошуковх ботів – і як наслідок, кількість пошукового трафіку за допомогою зображень невпинно зростатиме, нагадуючи про себе навіть найнезначнішими проявами.

Ну а остання позитивна річ – це те, що негативна річ у графіки лише одна!

І вона ховається у кілобайтах. Єдиним вагомим недоліком зображень можна назвати їхню вагу – адже, чим більше будуть важити зображення, тим довше буде завантажуватися інтернет-сторінка, і чим далі, відповідно, тим більше шансів, що людина просто-напросто не дочекається її відкриття і закриє браузер. Вирішення цієї проблеми просте – достатньо трохи постаратись і оптимізувати графіку для сайту – стискаючи її у .jpg, ви зможете досягти оптимальних результатів співвідношення якості та розміру зображення. Наприклад, при роботі у Adobe Photoshop (Save image for web) цілком прийнятним буде рівень стискання якості у 35-60%, залежно від кінцевого результату.

Звісно, цей негатив жодною мірою не є прийнятним для спеціалізованих фоторесурсах (знову згадаємо Флікр), інколи якість все ж таки переважає абсолютно всі інші вагомі речі. Вражаючи наповал своєю величчю, оригінальне та майстерне фото не заслуговує на обробку заради зменшення розміру.

Отже, використовуйте зображення на своєму сайті з розумом, і прибуде з вами сила!

Спонсор запису: Мы предлагаем купить ноутбуки в киеве с гарантией от производителя и программным обеспечением

captains of oil platform все для жінок: косметика avon

10 прекрасних тем для WordPress

Сергій Пішковцій — Thu, 15 Jan 2009 22:31:36 +0000

Записи з даної серії ("10 найкращих…" – хто не знає) не виходили вже досить давно. Час відновити традицію та розбавити серію, з одного боку, досить банальним, а з іншого – чудовим постом-підбіркою гарних тем оформлення вашого блогу на WordPress. Треба ж інколи вдовольняти свої естетичні потреби

Colourise

Демо | Завантаження

Чорна тема з райдужними барвами на фоні.

Outdoorsy

Демо | Завантаження

Стилізація під потертий блокнотик+квіточки.

Infinity

Демо | Завантаження

Чудово підійде для відеоблогу

WordPress Fun

Демо | Завантаження

Тема для блогів переважно приватного характеру. Для хлопців

Notepad Chaos

Демо | Завантаження

Тема представляє одну з популярних зараз тенденцій дизайну – grunge & hand-style.

Dark Forest

Демо | Завантаження

Стандартна ідея шаблону стає нестандартною завдяки оригінальному header’у.

BrownMagic

Демо | Завантаження

Зміст часто важить набагато більше, ніж дизайн. Тому в цій темі контент – усьому голова.

Arthemia

Д емо | Завантаження

Magazine-style, тобто, тема підійде для онлайнових видань.

PolaroidPress

Демо | Завантаження

Легкий, "захмарний" дизайн полегшить сприйняття контенту.

Abstract

Демо | Завантаження

Абстракція без претензії на надзвичайність.

На цьому все.

Якщо ви ще не помітили, то на Блогорідері крок за кроком впроваджуються маленькі, але корисні дрібниці. Відтепер ви можете відслідковувати нові записи (і не тільки, а й трохи більше цікавого) на Твіттері. А внизу сторінки ви завжди можете скористуватися формою для додавання ідей. Якщо ви хотіли б прочитати на Блогорідері статтю на ту чи іншу тему – то будь ласка, запропонуйте її, і цілком можливо, що вона з"явиться в одному з наступних постів.

Нехай щастить!

Спонсори випуску: електронний цифровий підпис Ограждения очистка воздуха канат киев Хто ж не любить вебдизайн

Нові можливості дизайну з CSS3

Сергій Пішковцій — Wed, 14 Jan 2009 03:24:58 +0000

Огляд можливостей нової специфікації CSS3 (зараз використовується CSS2.1) від популярного сайту smashingmagazine.com. Автор – Chris Spooner

В хитросплетінні Каскадних Таблиць Стилів (CSS) є чимало хвилюючих особливостей, котрі буквально спричинять вибух креативу в інтернеті. Ці нові деталі включають в себе правила стилів CSS, які будуть реалізовані у майбутній специфікації CSS3. Якщо глянути реалістично, то ви навряд чи зможете використовувати їх на повну силу у найближчі кілька років для своїх проектів, але для дизанерських блогів та сайтів, ці можливості допоможуть вийти за рамки сучасного вебу вже сьогодні, додаючи ту саму "ізюминку" у ваш дизайн та рухаючи дизайн-індустрію вперед.

Наведемо 5 технік, взяті з майбутнього, які ви можете практикувати на своєму сайті прямо тепер.

Border radius

Мабуть, це найзагальніша особливість CSS3, яка зараз використовується, – border-radius. Стандартні HTML-блоки мають квадратну форму з кутами у 90 градусів. Правило CSS3 дозволяє використовувати заокруглені кути.

-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;

Border-radius також може бути використаний для стилізації будь-якого окремого кута, хоча синтаксис для -moz- i -webkit- дещо відмінний:

-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;

Підтримується у браузерах Firefox, Safari i Google Chrome.

Використовується у Твіттері.

Border image

Border-image, як стає зрозуміло із назви, дозволяє файлу зображення бути використаним у якості границі об"єкта. Картинка спочатку створюється відносно кожної сторони об"єкта, де кожна сторона зображення відповідає стороні об"єкта HTML. Після чого воно здійснюється з наступним синтаксисом:

border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat;

Атрибут {border: 5px} конкретизує повну ширину границі, і потім правило border-image з цільовим файлом каже браузеру, скільки зображення використовувати, щоб заповнити ті 5px області границі.

Зображення для границі також можуть бути вказані на посторонній основі, дозволяючи різним зображенням бути використаними для кожної з чотирьох сторін, так само як і для кутів.

border-bottom-right-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-right-image border-right-image

Підтримується у Firefox 3.1, Safari, Chrome.

Використовується у Blog.SpoonGraphics.

Тіні для блоків і тексту

Тіні: хіба ви їх лише не любите? Вони можуть легко як створити, так і зруйнувати ваш дизайн. Тепер, за допомогою CSS3 вам навіть не потрібен Photoshop. Використання, яке ви бачите на зображенні (тінь від блоку з датою та тінь від слів Making Modular…), вже чудово використовується на сайті 24 Ways.

-webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc;

Два перші атрибути визначають відходження (offset) тіні від елементу, в нашому випадку це 10 пікселів по x та y осям. Третій атрибут призначає рівень розмивання (blur) тіні. Ну, і насамкінець, колір.

Атрибут text-shadow використовується для тіні від текстового контенту:

text-shadow: 2px 2px 5px #ccc;

Підтримується у Firefox 3.1, Safari, Chrome (box-shadow лише) та Opera (text-shadow).

Проста прозорість з RGBA та opacity

Використання PNG файлів у веб-дизайні зробило прозорість однією з його ключових властивостей. Зараз показник alpha або правило непрозорості можуть бути вказані безпосередньо у CSS.

rgba(200, 54, 54, 0.5); /* example: */ background: rgba(200, 54, 54, 0.5); /* or */ color: rgba(200, 54, 54, 0.5);

Перші три числа посилаються на червоний, зелений, синій кольорові канали, а останнє число – на альфа-канал, що викликає ефект прозорості.

В якості альтернативи, разом з правилом непрозорості колір може бути вказаний як зазвичай, а саме правило – як окреме.

color: #000; opacity: 0.5;

Підтримується у Firefox, Safari, Chrome, Opera (непрозорість), IE7 (непрозорість, з виправленнями).

Використовується у 24 Ways (RGBA).

Власні шрифти з @font-face

Завжди існував набір т.зв. безпечних шрифтів, які могли вільно використовуватись у вебі, як ви знаєте: Arial, Helvetica, Verdana, Georgia, Comic Sans, та інші. CSS3-правило @font-face дозволяє включати шрифт з будь-якого шрифтового файлу, розміщеного у вас на сервері. Це певною мірою приносить проблеми, пов"язані з авторським правом, адже є не так багато шрифтів, котрі можуть бути використані для @font-face включень.

Стилізація на практиці виглядає ось так:

@font-face { font-family:'Anivers'; src: url('/images/Anivers.otf') format('opentype'); }

Решта шрифтових опцій викликається як зазвичай:

h1 { font-family: 'Anivers', Helvetica, Sans-Serif;

Підтримується у Firefox 3.1, Safari, Opera 10, IE7 (з силою-силенною виправлень, якщо ви хоробрі, то зможете змусити працювати обраний шрифт у ІЕ7)

Використовується у TapTapTap.

Хоча CSS3 все ще перебуває на стадії розвитку, правила, описані тут, вже зараз підтримуються у деяких браузерах. Safari, зокрема, має обширну підтримку цих нових особливостей. Але на жаль, будучи високоякісним браузером, він має досить малу аудиторію, тому можливо, ці додаткові особливості CSS3 не є важливими для його групи користувачів. Але з комп"ютерами Mac від Apple, котрі впроваджуються у життя, використання Safari також зростатиме.

Firefox, з іншого боку, зараз має значно більше користувачів. Більше того, наступний його реліз, Firefox 3.1, додав підтримку властивостей CSS3. Беручи до уваги те, що більшість юзерів Firefox одразу ж оновлять свій браузер, скоро з"явиться велика група людей, котра матиме підтримку цих нових стильових правил.

Google Chrome був випущений минулого року. Базований на двигуні WebKit, цей браузер має майже все те саме, що і у Safari. Поки Safari додає численну пропорцію Mac-користувачів, Chrome надає пропорцію прихильників Windows.

Якщо ми глянемо на статистику використання браузерів від W3C за листопад 2008 року, то 44,2% користувачів подорожували в інтернеті з Firefox, 3,1% з Google Chrome, 2,7% – з Safari. Це означає, що близько 50% всіх інтернет-користувачів матимуть можливість побачити ці нові властивості. А в межах веб-дизайнерської спільноти, котра є значно свідоміша щодо вибору браузера, відсоток юзерів з підтримкою CSS3 зросте до рівня 70%.

Зворотній бік медалі

Ваш сайт тепер має широкий діапазон нових можливостей, але є кілька негативних моментів, що завадять цьому:

Internet Explorer. 46% інтернет-користувачів не зможуть побачити нові можливості. Тому не використовуйте їх як критичну частину вашого дизайну. Впевніться, що має місце і другорядний вибір, наприклад, стандартна границя замість border-image.
Непрацездатні таблиці стилів. Нові властивості CSS3 не були випущені в якості фінального релізу. Вони зараз виконуюються з ознаками, котрі є різними для різних браузерів. Тому вони можуть зробити недійсною вашу таблицю стилів.
Додатковий код. Звертаючи увагу на попередній пункт, бачимо, що ми мусимо додавати різні теги для різних браузерів, щоб описати одне правило. Це додає багато рядків до вашого CSS-коду.
Потенційна небезпека використання. Так само, як це робиться з стандартними фільтрами у Photoshop, використання цих нових стильових властивостей може призвести до появи болісно-страхітливих дизайнів. Тому будь ласка, краще не зловживайте ефектом тіні!

Про автора

Кріс Спунер – фрілансер, графічний та веб-дизайнер з Великобританії. Він живе темою дизайну і насолоджується тим, що йде нога-в-ногу з цією сферою. Кріс також публікує статті по дизайну, різноманітні туторіали на своєму блозі Blog.SpoonGraphics.

Посилання по темі:

Оригінал статті – Push your web design into the future with CSS3

Переклад на українську мову – Блогорідер

Спонсори запису: недорогой хостинг дать объявления в запорожье городской сайт одессы А може вас зацікавлять інформаційні технології?

33 приклади ребрендингу логотипів

Сергій Пішковцій — Wed, 26 Nov 2008 03:05:04 +0000

Для початку згадаємо, що ж таке ребрендинг.

Ребрендинг – зміна назви, логотипу, візуального оформлення бренду зі зміною позиціонування, а також зміна цілісної ідеології бренду.

Найяскравішим прикладом ребрендингу в Україні, який, без сумніву, помітили всі – це зміна бренду оператора мобільного зв’язку UMC на МТС.

Сайт Smash!ng apps зібрав чудову колекцію ребрендингу логотипів, який проводили топові бренди світу у 2008 році. Цей пост відображає найкращі тренди у логодизайні за цей період. Логотипи у цьому списку – прості, згладжені, та повністю показують сучасні web 2.0 тенденції. Цей перелік не є чисельним, але при більш детальному перегляді він буквально надихає та мотивує вас на нові ідеї.

Зліва – старий логотип, справа – нова версія.

Discovery Channel

Bank of New Zealand