CMS делаем сами

Юзабилити в навигации

2010/7/27 20:13 

Я больше года захожу в магазин "Новатек" - не как покупатель, просто позырить, сравнить цены, описания, отзывы - старый ноут уже на ладан дышит, сталбыть пора подыскивать новый. Путь стандартный - Яндекс.Маркет, подбор параметров желаемого коня - и просмотр предложений от продавцов: так я и наткнулся на этот украинский магазин. Наткнулся и в принципе пока в познавательных, а также в покупательных целях пользуюсь в основном только им - цены реально самые низкие по Украине, выбор приличный, юзабилити в порядке, дизайн лёгкий и ненапряжный - а я покупатель очень придирчивый :) Короче, после 2-3 месяцев колебаний свой новый Acer Aspire 5542G c гиговой видеокартой (не Alienware, но близко, близко) заказал у них и пока не пожалел об этом (хотя сумку и мышку впарили туфтовые, но тут сам виноват - нехрен было соглашаться на уговоры не видя товара, это чисто менеджеру бонус, развел по телефону за полминуты).

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

Навигация магазина Новатек без дополнительных разделов

На первой картинке - товарное меню на сайте магазина "Новатек", 4 пункта. Фотоаппараты и планшеты меня не интересовали, я кликал по первым 2-м пунктам и рылся в тамошних недрах. А сегодня я, человек с неплохим в общем-то зрением, впервые обратил внимание на 5-й пункт в товарном меню - пункт "Ещё", нажав на который, обнаружил, что всё это время мне было доступно около 10% ассортимента! Нет, я точно не интересуюсь покупкой новомодного блендера, или хлебопечки - однако в апреле-мае я искал себе монитор, большой и дорогой, искал в разных магазинах - а в этом мне даже и в голову не пришло!

Навигация магазина Новатек с открытым списком дополнительных разделов

Вот такое вот меню: из 4-х пунктов и 5-й, скрывающий кучу всего интересного - но такой неочевидный и незаметный. Интересно - сколько покупателей вместе со мной не заметили, или не обратили внимания на буковки мелким шрифтом и бледную стрелочку - и понесли свои денежки куда-то ещё?

Ребята тратят деньги на интернет-маркетинг, оптимизируют код своего магазина (кстати - почти идеал, мне понравилось внутри), снижают цены до минимально возможного чтобы завоевать рынок... платят Яндексу за попадание в Маркет (а это тот ещё геморрой, чисто технически), да и кроме Яндекса раскрутка сайта тоже имеет место - и всё это прекрасно работает: люди заходят... и не видят товара. Нет, надеюсь это не epic fail - просто хочу напомнить себе и своим читателям, что одна маленькая пуговка деталь может принести вполне немаленькие убытки - только из-за того, что пожалели денег или поленились провести юзабилити-тестирование!

Сама идея такого меню мне очень нравится - не захламляется дизайн а при необходимости в скрытый до поры раздел можно нагрузить много всякого - но существование этого раздела должно быть очевидным и визуально заметным. Необходимо выделение этой злополучной ссылки "Ещё" цветом, шрифтом, дополнительной пиктограммой - как угодно, но покупатель должен нажать на неё в своё первое же попадание на сайт!

вебмастерское за июнь

2010/6/27 14:32 2

Мало кто знает и еще меньше кто использует появившуюся в HTML5 фичу - предварительную загрузку страниц. Link prefetching работает во всех современных браузерах, поддержка в IE ожидается к 2020 году, ждите!

Copy to clipboard - бывает нужно вставить в буфер нечто одним кликом. Работает во всех браузерах, чистый джава-скрипт, без флэша (меня поправили - с флешем!).

Lightbox me! - еще одна реализация лайтбокса, с jQuery ясен пень. Красивая.

Мы тут вовсю воюем с мелкомягкими за нормальную поддержку спецификаций, забывая, что всё больший кусок рынка потихоньку откусывают браузеры мобильные. Смартфоны тихой сапой завоёвывают мир, а мужики и не в курсе! Начинаем готовиться: mobile image gallery - для идеального отображения галереи картинок на вашем iPhone 4G, если он у вас есть, разумеется! А если вы, как и я, работаете за еду и доступ к свежей Футураме, то протестировать галерею можно в десктопном эмуляторе смартфона: MobiOne. Приблуда для разработки страничек, заточенных под мобильные просмотрщики, под Win, бесплатная.

Smashingmagazine опубликовал подборку полезных скриптов, основанных на jQuery, некоторые я уже публиковал здесь, однако часть из новых представляются мне весьма полезными, особенно в плане работы с текстом.

xml2array - иногда бывает необходимо разобрать .xml-документ средствами php, например rss-feed или просто какой-нить особо хитрый конфигурационный файл - и не всегда это получается сделать с наскоку. В таком случает этот парсер лучше иметь в загашнике.

Мы будем жить теперь по-новому: с HTML5, CSS3, блекджеком и шлюхами (я уже говорил, что вышла новая Футурама? Я счастлив, сэр!) Готовим шаблон для супер-современного сайта по последнему слову неутвержденных пока еще спецификаций: часть 1, часть 2. Кому мало идей - HTML5Rocks в помощь!

Loginza.ru - ребята постарались и сделали наконец OpenID ближе к народу, молодцы! Кроме виджета для вебмастеров есть в наличии плагины для WordPress и PhpBB.

И пара слов о себе - сделал несколько сайтиков, которые рука не поворачивается вставить в портфолио, похоже, это становится трендом - не учить клиента прекрасному, а просто если он хочет херни - дать ему херню на всю сумму =( Кажется, это называется профессионализм... Полку сайтов, домены которых через год никто не продлит, прибыло, а я получил +5 к опыту и -10 к обаянию, и заодно понял, почему большинство государственных сайтов такое УГ.

на неделе: webmasters only

2009/12/14 0:34 

Давно не делал подборок только для вебмастеров, исправляюсь. Итак, на этой неделе делаем сайты:

  • Стильно: создаем CSS3 тень с помощью jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer - тень появляется во вновь созданном слое поверх искомого текста, смотрится вполне прилично и при больших и при умеренных размерах шрифта, адекватно регирует на масштабирование средствами браузера.
    Если этого недостаточно, то следующий способ предлагает помощь в создании тени, размытия, градиента, прозрачности. Кроссбраузерно, да, однако в ослике возможны некоторые негаразды, так что я предупредил!
  • Социально: для получения пользовательских данных используем примеры кросс-авторизации в социальных сетях с помощью OAuth и настраиваем виджет OpenID-провайдера на Prototype или jQuery.
    И наконец получаем разжеванное "Что? Где? Когда?" о микроформатах от NetTuts, в рунете до сих пор их держат за бедных родственников и грамотное применение встречается крайне редко.
  • Гламурно: создаем полупрозрачный фиксированный заголовок для страницы, изучаем новый New Clearfix Method (верстальщикам маст си), управляем файлами на сервере через браузер с помощью файлового менеджера Mollify.
  • Надёжно: читаем подробный отчет о создании архитектуры и оптимизации отдельных её частей для проекта Connect.ua, новички могут начать с изучения кеширования в связке Apache2 + nginx.
  • С умом: сохраняем в закладках и подписываемся на цикл "Гвозди Гольдмана" от SEO-механика, это начало эпического труда о создании монетизируемых СДЛ (без кавычек).

И новости культуры: вчера был расстрелян министр культуры Будущее MySQL в серьезной опасности! Так охарактеризовал ситуацию с покупкой Sun создатель этой широко известной открытой БД Майкл Видениус. Известно, что компания Oracle пытается купить Sun, и так как Sun приобрела в прошлом году MySQL, эта СУБД перейдет в собственность Oracle после одобрения сделки Европейской Комиссией. После покупки Sun, Oracle не обещает:

  • Сохранить весь код MySQL под открытой лицензией;
  • Не добавлять закрытые модули/утилиты к существующей СУБД
  • Не повышать стоимость лицензии и техподдержки...
читать полностью

С одной стороны, на одной MySQL свет клином не сошелся, с другой - однако, прецедент назревает нехороший! Интересно, как скоро после сделки (95%, что она успешно завершится) жадные лапы капиталистов потянутся к Postgress?
upd - не ссать, сделка, как я и ожидал, состоится, но Oracle пообещала быть паинькой!

CU3ER - 3D слайдер изображений

2009/10/16 16:25 

CU3ER - это 125 Kb.swf файл, позволяющий манипулировать картинками в 3D, т.е. в 3 измерениях, по сути это многофункциональный слайдер. Управление изображениями осуществляется с помощью подготовленного .xml файла с записанными инструкциями. Слайдер снабжен большим количеством функций, позволяющим произвести большое впечатление на смотрящего, другими словами - это "богато" смотрящийся элемент интерфейса для rich-media сайтов, например для сайтов-визиток, промо-сайтов, создание флеш презентаций или страниц с полноэкранными баннерами-презентациями.

CU3ER interface overview

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

CU3ER direction

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

Бесплатный, легко настраиваемый - CU3ER легко займёт своё место в осмысленном интерфейсе, или на худой конец порадует требовательного бестолкового заказчика, который сам не знает чего хочет, но "чтобы круто, современно и за копейки" :)

Проверка правописания в WYSIWYG-редакторах

2009/9/20 13:23 

Spell-checker

After the Deadline - разработчик нам как бы напоминают, что после торжественной сдачи проекта неплохо бы незаметненько забраться в его недра и довести до ума оставшиеся хвосты, например дописать забытую проверку правописания в админке. Скрипт существует в виде плагинов к TinyMCE, Wordpress, RoundCube Email и PHP List, все желающие могут на его основе написать свой плагин к любимой CMS. Для подключения потребуется получить ключ, для некоммерческого использования продукт бесплатен. Проверяет английский only, довольно удобен в использовании, есть библиотеки для Python и Ruby.

Если нет желания привязываться к стороннему API, то можно встроить скрипт попроще: AJAX Spell Checker. Требует PHP 5 и библиотеки pspell и/или aspell, разумеется проверяет тоже только английский.

Spellify - спеллчекер, работающий на Prototype JavaScript Framework, поддерживает несколько языков, русский пока не вошёл, но вы можете его добавить самостоятельно. Удобный autosuggest.

GoogieSpell - Ajax скрипт, без перезагрузки проверяющий грамматику, используя GoogleSpell API, 27 языков, русский вошёл, работает наверное во всех существующих браузерах, весит 50кБ. Имхо, наиболее универсальное решение на сегодняшний день.
В процессе написания обзора уже обнаружил аналогичную статью полугодовой давности, там еще пара продуктов, для полноты картины.

Напоминаю, что для проверки русской грамматики можно использовать API Яндекс.Спеллера, по ссылке - руководство разработчика по подключению к TinyMCE.

А в постовом сегодня Владимир Забродский повествует: как заработать в интернете и что потом с эдакими деньжищщами делать.