TOP-10 юзабилити-ошибок рунета – Роман Настенко против Якоба Нильсена

Ну конечно, я пошутила, Роман Настенко, скорее всего, “за” Нильсена. Потому что его Топ-10 юзабилити-ошибок рунета во многом повторяют правила юзабилити, высказанные Якобом Нильсеном уже лет 10 тому как. Несмотря на столь серьезный срок, создатели сайтов (дизайнеры, верстальщики, копирайтеры) совершает все те же ошибки, которые совершали 10 лет назад. А несчастные пользователи веб-сайтов, как и 10 лет назад, бродят по неудобным сайтом со стоном: “Ну кто так строит”!

Что лично мне понравилось в “Топ-10 юзабилити-ошибках рунета“:

Во-первых, понравилась сама идея еще раз напомнить о юзабилити как разработчикам сайтов, так и копирайтерам. Несмотря на то, что адекватного русского эквивалента этого термина так и не существует, юзабилити – понятие архиважное. Веб-сайт может быть дешевым, некрасивым, глупым – пользователи его простят, и сайт будет жить. И только неудобность сайта для пользователя равносильна смерти.

Во-вторых, очень понравилось то, что на первое место Роман вынес удобность текста для читателя.

Чаще всего:

  1. Текст не адаптирован для Сети (слишком большие абзацы, много воды, не расставлены нужные ссылки, возможно текст в конкретном месте вообще не нужен как таковой).
  2. Шрифт слишком маленький для комфортного чтения.
  3. Цвет текста не контрастный на своем фоне.
  4. Между-строчное расстояние слишком маленькое.
  5. Текст растягивается в слишком длинные строки.
  6. Текст плохо иллюстрирован там, где это бы помогло его восприятию.
  7. Текст сложно воспринимать, потому что элементы графического оформления страницы его подавляют (даже тогда, когда текст — главное на странице).
  8. Заголовки не отличаются по размеру от текста.
  9. Ссылки плохо отличимы от текста.
  10. Не используется логическое форматирование (списки, код, цитаты).
  11. Текст безграмотный.

Для большинства сайтов текст – главная информация. Дизайн – это та обертка, которая призвана улучшить подачу текста, расставить акценты, но ни в коем случае не подавлять текст (многим заказчикам неплохо бы и расходы на создание сайта строить, исходя из того, что тексты – это ну никак не второстепенная информация для заполнения свободного места).

Еще один плюс обзора Романа – выделение отдельным пунктом: “Текущее положение пользователя на сайте указано плохо: на большинстве сайтов текущее положение (в пунктах меню, в иерархии сайта) не указано вообще, либо указано очень плохо”. Этот пункт очень важен для пользователей, особенно когда речь идет о веб-сайтах с разветвленной структурой.

Статьи по теме в блоге темза .ком:

4 элемента дизайна, которые вы ненавидите, но которые работают
Да подумайте же обо мне, чьорт побьери!

Как я сделала самый ненавистный мне баннер

Вечерняя история без морали и нравоучений :)

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

Но дело, как я уже упоминала, было вечером, творить было нечего. Можно было, конечно же, пофотошопить для себя, но хотелось именно решать поставленную задачу, придумывать варианты и обязательно видеть реакцию заказчика на мое творение (для меня обратная связь –необходимая составляющая процесса творения).

В отчаянии я зашла на один из сайтов для фрилансеров и, о чудо, увидела там проект именно для меня:

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

Это было именно то, что мне нужно.

читать дальше (текст откроется в новом окне)

Реклама, которая приводит в восторг

В блоге drugoi – подборка лучшей рекламы за 2007 год. Обалдеть… И всем обязательно смотреть :).

Некоторые рекламные плакаты.

Хонда. Сверхчистый двигатель с 0% СO2 в выхлопных газах

Таблетки для улучшения памяти. Ну не блеск?

Курсы самообороны для женщин.

Durex. Extra large. (понятно и без перевода :))

Почему нэйминг надо поручать непрофессионалам

Давно известно, что учить и лечить могут все. “Я не гинеколог, но посмотреть могу“, – и этим все сказано.

 

Но в последнее время появилась еще одно занятие, которое, как многим кажется, не требует специальных знаний и подготовки. Нейминг – казалось бы, чего же проще? Ведь все мы, потомки Адама, – профессиональные неймеры с рождения. Сам Господь пользовался услугами нашего знаменитого предка для того, чтобы давать имена живым тварям.

К чему приводит подобная уверенность в том, что неймингом может заниматься всякий, знающий буквы, можно увидеть на сайте фриланс.ру (www.free-lance.ru/blogs/view.php?tr=163963).

На конкурсной основе заказчик предложил придумать название для студии графического дизайна. Профиль студии – создание сайтов и интерактивных сервисов.

Вот некоторые из предложенных заказчику названий:

Трэшок. маленький такой трэш? Вот так сразу и говорим нашим клиентам: у нас тут сплошной трэш, но совсем небольшой. Трэшок такой вот :)

Прорыв. название просто для фабрики презервативов.

Лоджиси (производное от известного слова “логика”). Лоджиси ты на кровати да списи сладко.

rivisor.ru – Разработка И Внедрение Интерактивных Систем.

К нам едит ривизор, убейте сибя ап стенку.

Студия графического дизайна “Творетелли”. Ох и натворетеллят.

Закот. И филиалы студии – запёс и задядяфедор.

pravsha.com. Эх, а умелец-то был левшой…

Изба. Изба-вебрисовальня и фотошопальня.

Залет. Вас приветствует студия “Залёт”, поздравляем вас, вы залетели.

Укроп. Ну тут без комментариев. Но лучше – редиска.

Риздос. Первую букву на п замените, будет точнее.

Студия графического дизайна “БОБРИХА”. Этакая толстенькая пушистенькая бобриха. Но лучше так назвать стоматклинику. А студию дизайна – бурундучиха, мне как-то ближе бурундуки :). 

Так почему же нэйминг надо поручать непрофессионалам? Потому что смех продлевает жизнь. А то, что делают пионЭры-непрофессионалы, получается просто смешно. Читаешь – и заряд бодрости на день обеспечен :).

4 элемента дизайна, которые вы ненавидите, но которые работают

вольный перевод статьи, показавшейся мне интересной и полезной: 4 Design Elements You Hate, But… They Work – 4 элемента дизайна, которые вы ненавидите, но которые работают.

1. Click Here to Continue (кликните здесь, чтобы продолжить).

Многие дизайнеры не любят фразы вроде “кликни здесь”. Пользователь сайта – не такой уж чайник, чтобы нуждаться в постоянных пошаговых инструкциях. Намного лучше написать “читать статью” или “узнать подробнее о …”. Однако сентябрьские маркетинговые исследования показали, что фраза “кликни здесь” работает эффективнее, чем другие фразы.

2. Кнопка Home (главная страница)

Многие дизайнеры не включают кнопку “главная страница” в меню сайта. Вместо этого используется логотип (как правило, в верхнем левом углу сайта). Ссылка с логотипа ведет на главную страницу сайта, что является общепринятой практикой в Интернете. Однако до сих пор очень многие пользователи не знают, что ссылка с логотипа ведет на главную страницу. Невозможность вернуться на главную страницу для таких пользователей – серьезный раздражающий фактор.

3. Где блок поиска на вашем сайте?

Очень часто дизайнеры, увлекаясь общим оформлением сайта, забывают о кнопке “Поиск”. Ее размещают в последнюю очередь там, где надо чем-то занять место. Однако для сайтов, на которых контент играет решающую роль, или для сайтов с каталогом товаров, именно блок поиска должен являться доминирующим и строить вокруг себя весь дизайн.

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

4. Сделайте Это Более очевидным.

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

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

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

Если какой-то прием работает, его надо использовать вне зависимости от того, насколько дизайнер ненавидит этот прием в дизайне.

Все переводные статьи западных фрилансеров в блоге лондонского фрилансера.

Немного полезного – перевод bitmap в вектор

Полезное (для дизайнеров):

Переводит bitmap имиджи в вектор. Очень простой интерфейс, загрузка имиджа с компьютера или из инета. Есть демонстрационный фильм (на аглийском, но все понятно и по тому, что показывается на экране). Отлажен создателями для отрисовки фотографий и логотипов.

Эти одноразовые заказчики… ну тупые (с)

Вы знаете разницу между интроном и экзоном? Между нейтрино и позитроном?
Неужели нет? Но это ведь так просто, курс средней школы. Говорите, что вам эти знания не нужны в вашей работе дизайнера/программиста/писателя? Конечно же, вы правы.

Но и заказчику очень часто не нужны серьезные знания в области сайтостроения. Иногда заказчику нужен только один сайт с рекламой его компании. Просто для престижа. Шоб було, говорят украинцы. Чтобы было что написать на визитке.

Именно такие одноразовые заказчики часто доставляют множество проблем фрилансерам. Но не потому, что заказчики тупые. А потому, что неопытные фрилансеры, оставляя свое предложение или обсуждая задание, не всегда задают правильные вопросы заказчику.

«Нужен дизайн сайта компании». Казалось бы, заказчик заказывает дизайн. Однако убедитесь, что заказчик понимает, что такое дизайн и что такое сайт. Не спешите говорить, что невозможно НЕ понимать разницу между сайтом и дизайном. Потому что вы сами не понимаете разницу между интроном и экзоном, а ведь это тоже так очевидно.

“Мне нужны тексты для сайта” – это может означать как текст, написанный в любом текстовом редакторе, так и текст, полностью готовый к размещению на сайте (в формате htm со стилями в head). Да еще и с картинками, потому что заказчик уверен, что нельзя написать статью о новых гаджетах без иллюстрации этих самых гаджетов.

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

Конечно же, в такой ситуации фрилансер формально прав – что заказали, то и получили. Но недовольный заказчик, искренне уверенный, что вы его кинули на деньги, и негативный отзыв – это не самая хорошая реклама для вас. «Фрилансера репутация кормит», – сказала бы я.

Поэтому избегайте недопонимания.

Задавайте вопросы заказчикучто именно он хочет получить, каким он видит конечный продукт вашей работы.

Оговорите заранее, в каком виде вы передадите заказчику конечный продукт – будет ли это картинка-дизайн или сверстанный сайт, текст в формате word или текст, готовый к размещению на сайте, баннер в формате gif или баннер плюс исходник и т.д.

Статьи по теме в блоге темза .ком:

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

Когда лучше один раз услышать, чем 100 раз увидеть?

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

Поэтому, несомненно, данный сервис заинтересует многих:

how j say.com – An English Pronouncing Dictionary with Instant Sound.

Система очень проста – вводите слово и слушаете, как оно звучит.

Рутина – один из моих последних баннеров:

Дизайнеру (и не только) на заметку

Небольшая подборка свежих полезностей в блогах.

Блог Димка приводит 10 лучших генераторов шаблонов для блогов и сайтов (mashable.com/2007/11/18/10-template-generators/). Возможно, со временем сделаю анализ некоторых генераторов и перевод описаний на русский. Так что следите за обновлениями и подписывайтесь на рассылку (неприкрытая реклама :)).

BlogDeluxe.ru (все лучшее для блогов и блогеров) рекламирует сервис imagechef.com. Сервис служит для автоматического создания картинок с надписями. С помощью этого сервиса очень просто сделать себе аватару для блога, форума и т.д. 
ImageChef.com - Custom comment codes for MySpace, Hi5, Friendster and more

ImageChef.com - Custom comment codes for MySpace, Hi5, Friendster and more
Полезный сервис.

7 уроков качественной html-верстки (http://www.pastukhova.com/lesson1.php). Отличные уроки верстки. Особенно приятно, что пошагово показывается создание style.css файла.

Ну и отдохнем – блог просто фактов (prostofact.blogspot.com/) приводит интересные данные о туалетной бумаге. Оказывается,

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

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

Подарите своему блогу новую шапочку

WordPress – это просто золотой ключик, именно эта система управления контентом позволила миллионам открыть свои блоги. И пожертвовать своей индивидуальностью – пряников тем для вордпресса (дизайнов) всегда не хватает на всех… Что же делать? Поменять дизайн своего блога самому.

Начнем с главного – с шапки. Одень дорогую шапку, и никто не заподозрит, что голова пустая :).

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

Прежде всего, вам нужна сама шапка (хедер) – картинка в формате jpg. Специально для тех, кто не готов нарисовать свою шапку сам, представляю коллекцию шапок для вордпресс (http://www.digitalwestex.com/gallery/index.php). Авторы сайта разрешают использовать все имиджи, находящиеся на сайте, при условии, что вы укажете их авторство.

Шапки в этой коллекции можно найти самые разные:

header1

header2

header3

header

 

После того, как шапка выбрана, ее (jpg файл) надо загрузить на хост в поддиректорию:wp_content/themes/default/images/

Осталось проинформировать систему, что теперь в хедере надо отображать не старую надоевшую картинку, а новую, индивидуальную.

Для этого идем в Панель инструментов/Внешний вид/Редактор тем.
В крайне правой колонке видим Файлы темы “Базовая WordPress”. Выбираем “Список стилей” и заменяем название старого хедера kubrickheader.jpg на название нового файла, который вы загрузили на хост: #header { background: #73a0c5 url(‘images/название-нового-файла.jpg’) no-repeat bottom center; }

Вот и все, у вашего блога появилась новая шапка :).

 

 

Статьи по теме в блоге темза .ком:

Полезные плагины для блога на WordPress