Пользовательский интерфейс в Web 3
Последний год я стал замечать что слово «юзабилити» стало проскакивать все чаще во всякого рода компьютерных публикациях рунета. Сейчас особо часто это слово замечается рядом с более нашумевшим «Веб 2.0». Все чаще слышатся оптимистичные заявления о переходе на приложения с веб-интерфейсом и в большинстве случаев имеются ввиду приложения Гугл.
И, как разработчик, я хотел бы представить читателю (который скорее всего является подобным мне разработчиком) свой взгляд на проблемы и решения создания веб-приложений и их интерфейсов.
Веб живет своей жизнью и жизнь эту можно отметить достаточно бурной эволюцией и развитием. Особенно последнии годы в период раздувания «Веб 2.0 пузыря». И самое интересное в этом развитии, то, что «атовизмы» отсыхают и отпадают не так быстро, как хотелось бы. А новые способности и возможности адаптируются и применяются наоборот достаточно медленно. Именно с этого я хочу начать свое рассуждение, т.к. считаю вопрос совместимости основным для успешного развития веб-интерфейсов. Я не буду приводить множество примеров о глючном IE или отличным рендерингом css-свойств в разных браузерах. Или взять тот-же флеш от Адоби, который, несмотря на долгую историю развития и мажорную версию 9, все еще преподносит немало сюрпризов.
Цель этой заметки — небольшая аналитка, собранная из личного опыта. Как построить удобный пользовтельский интерфейс для веба. Итак, мои советы.
Кроссбраузерная верстка. Не всегда дается легко, особенно при использовании сложного размещения блоков в дизайне. Но это первое и главное правило, если вы делаете проект в рамках обычного html интерфейса.
Не пугайтесь невалидного кода. Да, если можно делайте код красивым, но помните что код читают роботы, а сайтом пользуются люди. Поэтому чаще полезнее провести время в проектировании, тестировнии интерфейса или еще что вы посчитаете более важным.
Меньше используйте мешанины flash-html. Если вы хотите использовать флеш, сделайте на нем отдельную часть сайта, чтобы пользователь варился в ней как в отдельном приложении. Все дело в том, что флеш не учитывает особенностей исполнения интерфейса платформы на которой работает конечный пользователь. Поэтому контролы будут сильно отличаться внешне и по принципу работы, что будет раздражать пользователя. Пользователю легче привыкнуть к одному месту на сайте где все по другому, чем постоянно переключать внимание.
При использовании Ajax старайтесь всегда делать версию сайта, работающую в стиле old-school. Формы, поля, ссылки. В случае глюков или тормозов JS опытные пользователи всегда смогут перейти к обыкновенному режиму работы.
Используйте готовые JS/Ajax библиотеки. В них учтены уже кросс-браузерность и неровности работы JS. Писать «с нуля» свое слишком дорого и не оправдано.
Делайте сайты похожими на другие. Не надо клонировать дизайн или идеи. Я имею ввиду функциональные решения. Если есть тенденции их надо учитывать. Пользователю будет проще разобраться со всеми активными элементами сайта, если он их уже несколько раз встречал.
Пробуйте самые последнии и современные технологии веб, в которых уже учтены многие недостатки прошлых лет. На данный момент я имею ввиду декстопно ориентированные фреймвоки MS Silverlight и Adobe Air. Не обязательно вы их будете использовать в своих решениях, но быть «на коне» очень важно.
Линкотека №1 9
Решил сменить свою del.icio.us ленту в сайдбаре на более-менее регулярный постинг интересных ссылок.
А вот место в сайдбаре собираюсь заполнить блогроллом. Так что если хотите попасть в список — напишите мне на имейл или в комментарии свой сайт/блог. Добавляю на условии, что вы ставите на меня обратный линк.
Итак интересное, что я «нарыл» на просторах интернета за последние пару недель.
- StaticGenerator for Django — ссылка дня! очень полезный проект для django-разработчиков, может генерировать статический html вариант сайта из моделей, пользуясь методом
get_absolute_url. Самое главное, что через сигналы он может автоматом обновлять html-страницы при изменении/добавлении объектов (т.е. буквально данных в базе). - Evaluation of web based WYSIWYG-editors, test result 2007 — обзор онлайновых WYSIWYG редакторов (javascript и один на java), с него набрел на один интересный редактор (следующая ссылка).
- WYMeditor - web-based XHTML editor — простой интересный онлайн редактор, без возможности upload/insert images, но зато более семантичный и наглядный для тех, кто знает HTML.
- WYMstyle и css-boilerplate — css frameworks, хороши для веб проектов, когда у вас еще нет дизайна веб-сайта/веб-приложения, но вам нужно более-менее симпатично показать контент и функционал. Облегчают работу тем, кто не любит долгой возни с версткой.
- swfobject 2 — новая переработанная версия (на данный момент rc1) javascript библиотеки для включения в страницу flash/flex роликов или приложений. Кто еще не пробывал — советую, намного удобнее, чем писать кроссбраузерные теги и делать ручные проверки нужной версии flash. Еще можно почитать блог разработчиков — SWFFix Dev Blog.
- transdb — неплохая библиотека для локализации конента в django. Добавляет специальные многоязыковые текстовые поля в модель, что облегчает работу с базой и хорошо интегрируется с существующей системой i18n в django.
- PyAMF — Реализация на Python поддержки протокола обмена данными AMF (от Adobe) для клиент-серверного взаимодействия. Используется во flash и других проектах Adobe. Данные по этому протоколу передаются в бинарном виде, что более-продуктивно с точки зрения потребления траффика, автоматизирована сериализация/десериализация данных как на стороне сервера, так и клиента.
