Это перевод довольно новой статьи, которая вышла 4 июля 2008 года. Если вы уже читали ее, то навряд ли найдете что-то новое, но для тех, кто не знаком с оригиналом в статье найдется масса интересного. Сначала я хотел перевести и подписи к картинкам, но позже понял, что не стоит этого делать, так как статья ориентирована на грамотного читателя, который способен сам определить простейшие фразы.

UPD: Опубликована вторая часть статьи habrahabr.ru/blogs/ui_design_and_usability/45680

Когда вы хотите увеличить доход вашего сервиса вы должны увеличить количество заполнений ваших веб-форм. Даже, если, на первый взгляд, у вас есть какие-то революционные идеи для того чтобы удивить посетителей, недостаточно просто добавить возможность регистрации на вашем сайте. Для того, чтобы сервис достиг максимальных посещений мы, дизайнеры, должны предоставить пользователю хорошие решения (good user experience). Мы должны завлечь их, описать им, как работает сервис, объяснить им, почему стоит заполнить форму и описать выгоду, которую они от этого получат. И, конечно, мы должны сделать их участие максимально простым.

Тем не менее, разработка дизайна веб-форм — это не простое дело. И здесь есть одна простая причина: никто не любит заполнять формы — ни в оффлайне ни в онлайне. Следовательно, как дизайнеры, мы обязаны найти дизайнерские решения, чтобы сделать заполнение форм делом простым, интуитивным и безболезненным.

Но как на самом деле мы находим такие решения? Где в разметке должна располагаться ссылка на форму? Какой у нее должен быть дизайн? Как мы должны выделить подписи, и какое выравнивание у них должно быть? Какие паттерны дизайна применяются в современных веб-сайтах? Это именно те вопросы, которые мы задавали себе. И чтобы получить ответы мы провели наше обозрение.

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

13 ноября, вот уже третий раз в подряд, в рамках «Всемирного дня юзабилити» в Москве прошла открытая конференция WUD 2008. Мероприятие посетило около 200 специалистов. От лица организаторов конференции — сообщества юзабилити-специалистов RusCHI — мы благодарим всех за интерес к вопросам юзабилити и человеко-компьютерного взаимодействия. Конференция традиционно была бесплатной и прошла в помещении компании 1С.

Посмотреть фотографии c WUD 2008 (Flickr)

Сайты авиакомпаний и агентств путешествий: текущее состояние и тенденции (Иван Бурмистров)

Презентация на Slideshare

Юзабилити и транспорт: вести с полей (Екатерина Умнова, Анна Тихонина, Иван Дегтяренко)

Презентация на Slideshare

Поможет ли подобное решение выполнять следующие пользовательские задачи?
— наливать одинаково
— наливать всем сразу

В нашей реальности концепт требует доработки — ещё одного горлышка.

Другие решения дизайна привычных вещей:
UI пачки молока
UI пачки пилюль
Выключатель в гостиничном номере

Не­дав­но ком­па­ния Qlikworld вы­ло­жи­ла не­боль­шой сер­вис рас­ста­нов­ки «мяг­ких» пе­ре­но­сов. Он на­хо­дит­ся по ад­ре­су — www.plazoo.com/ru/tools.asp

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

Сер­вис рас­став­ля­ет пе­ре­но­сы с уче­том воз­мож­но­го из­ме­не­ния раз­ме­ра ок­на вы­во­да.

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

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

Эта статья уже со­дер­жит рас­став­лен­ные пе­ре­но­сы. Из­ме­няя раз­мер ок­на бра­у­зе­ра, мож­но уви­деть, как ра­бо­та­ет сер­вис.

Примечание: ниже расположен перевод заметки Image Optimization, Part 3: Four Steps to File Size Reduction от Stoyan Stefanov. В ней рассматриваются наиболее популярные консольные утилиты для минимизации изображений. Мои комментарии далее курсивом.
Об авторе: Stoyan Stefanov работает веб-разработчиком в команде Yahoo! по исключительной производительности и руководит разработкой инструмента для анализа производительности — YSlow. Он также внес значительный вклад в программы, разрабатываемые с открытым исходным кодом, выступает на конференциях и является техническим писателем: его последняя книга озаглавлена Объектно-ориентированный JavaScript.

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

• Оптимизация изображений, часть 1: важность картинок
• Оптимизация изображений, часть 2: выбираем нужный формат файлов

Текущая заметка посвящена некоторым наиболее часто используемым инструментам, которые можно применить для уменьшения размера изображений. Идея заключается в следующем: мы можем получать все изображения от дизайнера, но не оставлять их в исходном виде, а немного уменьшать в размере, используя указанные ниже инструменты. Это позволит автоматизировать процесс без необходимости глубокого анализа структуры изображения.
Читать дальше на webo.in →

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

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

Некоторые комментарии к моему последнему топику натолкнули на мысль, что очень важно для стартапа как-то оценить его достижения.

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

В связи с этим возникает вопрос: как же реально оценить какие-либо достижения начинающей интернет-компании. Другими словами «как п***ками мериться будем?».

Проблема

На многих сайтах я наблюдаю следующий процесс:

1. Пользователь заходит на сайт
2. Пользователь находит что-то, что он хочет купить/скачать/сохранить
3. Пользователь переходит на страницу регистрации
4. Пользователь вводит свою информацию и ждёт письма с ссылкой активации
5. Пользователь получает письмо и переходит по ссылке
6. Пользователь попадает либо на страницу активации, либо на страницу логина, либо на страницу, откуда он начал регистрацию
7. Пользователь снова находит то что он хотел купить/скачать/сохранить
8. Пользователь покупает/скачивает/сохраняет

Суть проблемы: пользователь теряет контекст своего действия. После регистрации он вынужден снова искать то, что он изначально хотел купить/скачать/сохранить.

Решение

Сегодня я смотрела видео с презентации одного из мемберов команды 37 signals о том, как они, оставаясь маленькой компанией (из 12 человек), не привлекая венчурные инвестиции, умудряются успешно продавать свой продукт и быть чертовски прибыльными.

Обобщая идею презентации могу сказать следующее:

1. Создайте хороший продукт
2. Установите разумную цену
3. Попросите ваших пользователей заплатить за него

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

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

Несмотря на то, что некоторыми это может рассматриваться как инсайдерская информация – нам нечего скрывать:

//2500 пользователей пользуются нашими платными услугами

2500 пользователей платной услуги получаются при допущениях:
V нашего рынка = 1000 000 пользователей (согласно проведенному нами
исследованию)
Мы занимаем 5% рынка = 50 000 пользователей
5% из них пользуется нашими услугами = 2500 пользователей. (это 25% от 1% ;))

#1 вариант#
базовый: от 5 у.е. — 50% пользователей
средний: от 10 у.е. 40% пользователей
продвинутый: от 15 у.е. — 10% пользователей
1250 * 5 + 1000 * 10 + 250 * 15=
6250 + 10 000 + 3750 = 20 000 у.е. месяц
***дальше по тексту без расшифровки

#2 вариант#
базовый: от 5 60%
средний: от 10 30%
продвинутый: от 15 — 10%
7500 + 7500 + 3750 = 18 750 месяц

#3 вариант#
базовый: от 5 70%
средний: от 10 20%
продвинутый: от 15 — 10%
8750 + 5000 + 3750 = 17 750 месяц

#4 вариант#
базовый: от 5 75%
средний: от 10 20%
продвинутый: от 15 — 5%
9375 + 5000 + 1875 = 16 250

Как видите, при любом раскладе получается весьма неплохо. Это не сотни миллионов, которыми воротят ключевые игроки рынка, но это неплохие деньги для начала.

Возвращаясь к идее 37 signals: у вас есть оооочень маленькие шансы стать еще одним facebook’ом, myspace или google. Они есть, но совсем небольшие. Кроме того, даже эти компании не стали «звездами за 1 ночь», а развивали свою базу пользователей постепенно, пусть и очень большими шагами.

А теперь спросите себя: готовы ли вы переработать свою стратегию таким образом, чтобы ваш бизнес действительно приносил деньги, а не имел виртуальную стоимость (как происходит со многими стартапами, которые потом покупают)? Если да, то вперед!
Я думаю, что мы свой выбор уже сделали.

Заметка Выносим CSS в пост-загрузку была посвящена исследованию наиболее быстрого способа добавить стилевые правила в исходный документ динамически, не затрагивая при этом стадию предзагрузки (когда у нас еще белый экран в браузере). В ней, однако, не был рассмотрен следующий вопрос: какой метод использовать для добавления массива CSS-правил в сам HTML.

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

Тестовое окружение

Поскольку скорость загрузки отдельного CSS-файла достаточна велика, а требуется рассмотреть, как его содержимое может повлиять на скорость его динамического применения к документу, то нам нужны сотни или даже тысячи правил. В качестве отправной точки была опять взята главная страница Яндекса, стили которой были вынесены в отдельный файл и скопированы 10 раз. Это дало необходимую задержку (которая существенно больше погрешности, вносимой браузерами) и не сильно увеличило сжатый с помощью gzip файл.

Все варианты представлены на тестовой странице, вкратце опишу основные подходы.

Читать дальше yа webo.in →.

Готовим макет для клиента. Часть II: Если гладить, то как?

Часть I: Гладить или нет?
Часть II: Если гладить, то как?

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

Коллеги, други и просто хабралюди. С неделю назад на Web Optimizator был выложен код для счетчика загрузки (немного более подробно об измерении времени загрузки страницы можно прочитать в статьях про анализ скорости загрузки и разгон интернет-магазина).

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


График распределения пользователей webo.in по времени загрузки у них этого сайта

Итак, свершилось то, чего так долго ждали некоторые посвященные блоггеры. Я открыл для всех желающих Parasite Eliminator – сервис и плагин для Wordpress, благодаря которым в моих блогах нет ручного спама.

10 ноября 2008 года – это черный день российских блогоспамеров (у зарубежных будет другой черный день, я еще не знаю, когда сделаю международную версию плагина).

Как оно работает

Не так давно Gunger представил вариант раскрашивания элементов ввода текста на форме. Мне этот вариант, несмотря на критику некоторых юзеров, очень понравился и я решил что со временем сделаю свою реализацию.

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

К.Страуб, Э.Шаффер: Вы не увидите того, на что не смотрите... | UPA MONTHLY — OCTOBER 2008 | UPA MONTHLY — SEPTEMBER 2008 | Дмитрий Сатин. Юзабилити Интернет-магазинов. Поиск должен быть! | Джефф Джонсон: Концептуальная модель – первый важный шаг... | Регистрация на бесплатный вебинар UPA Russia, посвященный Всемирному Дню Юзабилити

В преддверии Всемирного дня юзабилити (13 ноября) и предстоящей по этому поводу открытой конференция WUD 2008 (13 ноября, 10:00, Москва, конференц-зал компании 1С, вход свободный) на RuTube появилось видео с прошлогодней конференции WUD 2007.

Задачи, решаемые юзабилити — международный подход (Константин Самойлов)

Презентация (pdf)

Вторая, и потому уже законно называющаяся ежегодной конференция User Experience 2008 прошла в последние дни октября в центре «Инфопространство» в Москве. В программе, как и в прошлом году, была масса докладов как для профессионалов, так и для просто интересующихся темой.

Например, много позитивных отзывов от слушателей собрало выступление Джеффа Джонсона (Jeff Johnson), старшего консультанта в компании UI Wizards Inc. и автора книги «Web Bloopers». Джефф много веселил слушателей рассказами о типичных ошибках в проектировании веб-интерфейсов и призывал почаще прислушиваться к собственному здравому смыслу.

Но если бы всем хватало своего здравого смысла, не существовало бы самой сферы консультационных услуг по юзабилити. А этот рынок, по мнению dmitrysatin, — наоборот «бездонный».

Нет ничего лучше пассивного дохода, все это знают!

Разработка сайта — проект, это одно. Бюджет относительно высокий, но и трудозатраты значительные. Намного интересенее после завершения разработки сайта оказывать услуги по так называеммой «поддержки сайта».

Стоимость поддержки может быть символическая, к примеру $50 в месяц, но это ежемесячный стабильный доход. Как правило поддержка сводится к обновлению контента, или настройки почтовых ящиков.
Как вариант это может быть продвижение сайта, поисковая оптимизация или еще что-то, но сумма платежа соответственно увеличивается.

Основной вопрос с которым может сталкнуться студия и в частности менеджеры, обслуживающие клиента это необходимость регулярно напоминать о себе и «создавать видимость» работы. Несмотря на то, что вы четно исполняете свои обязательства, обновляете контент, управляете почтой или что-то еще… когда вопрос доходит до платежа очень часто говорят «Ну а за что єто я плачу? Работі же не видно, да и как-то дорого!»

Если бы своевременно менеджер (раз в неделю), хотя бы писал письмо о том, что мы сделали тото и тото. «Пришлите нам свежие новости!», «как ваши дела?» ситуаций таких было бы меньше и колличество проектов на поддержку только увеличивалось.

Предлагаю составить список работ, таких как 1. обновление контента или 2. управление почтой которые на самом деле не составляют большого труда, но дают «плюс» к общей картине.

Буду рад хорошим комментам. Спасибо!