Линкотека №5. Дизайн веб-интерфейсов. 6
Сегодня подборка интересных ссылок по теме дизайна пользовтельских интерфейсов, или как говорят на «буржуйском» User Experience Design.
UI-patterns — коллекция типовых решений (примеров) и скриншотов для создания веб-интерфейсов. Хорошо отсортирована. Будет полезна для вдохновения или поиска готового решения.
Quince UX Design Patterns Listing — еще одна подборка подобная предыдущей, но тут более детальное описание каждого примера и дополнительные иллюстрации.
UX Booth — блог о юзабилити и вообщем интерфейсах. Проводят периодически публичное юзабилити–тестирование разных сервисов и пишут критику.
Product Planner — онлайн–сервис, позволяющий группе разработчиков описывать движение (навигацию) по страницам сайта (user flow на буржуйском). Сервис этот не сложный, функционал довольно ограниченный, но со своей узкой задачей справляется отлично.
I ♥ wireframes — блог сербской девушки веб-дизайнера, собирающей фотографии и скриншоты wireframes (не знаю как перевести) и процесса их создания, которые используются для прототипирования интерфейсов. Хороший ресурс для вдохновения, особенно если вы еще толком не пробовали проектировать интерфейсы.
Пятерки считаю вполне хватит для первого поста на тему интерфейсов. Дальше будет меньше ссылок и больше личной писанины.
Буду рад, если напишите в комментариях какие ссылки оказались наиболее полезными. Это поможет мне определиться о чем написать следующий пост.
Пользовательский интерфейс в Web 3
Последний год я стал замечать что слово «юзабилити» стало проскакивать все чаще во всякого рода компьютерных публикациях рунета. Сейчас особо часто это слово замечается рядом с более нашумевшим «Веб 2.0». Все чаще слышатся оптимистичные заявления о переходе на приложения с веб-интерфейсом и в большинстве случаев имеются ввиду приложения Гугл.
И, как разработчик, я хотел бы представить читателю (который скорее всего является подобным мне разработчиком) свой взгляд на проблемы и решения создания веб-приложений и их интерфейсов.
Веб живет своей жизнью и жизнь эту можно отметить достаточно бурной эволюцией и развитием. Особенно последнии годы в период раздувания «Веб 2.0 пузыря». И самое интересное в этом развитии, то, что «атовизмы» отсыхают и отпадают не так быстро, как хотелось бы. А новые способности и возможности адаптируются и применяются наоборот достаточно медленно. Именно с этого я хочу начать свое рассуждение, т.к. считаю вопрос совместимости основным для успешного развития веб-интерфейсов. Я не буду приводить множество примеров о глючном IE или отличным рендерингом css-свойств в разных браузерах. Или взять тот-же флеш от Адоби, который, несмотря на долгую историю развития и мажорную версию 9, все еще преподносит немало сюрпризов.
Цель этой заметки — небольшая аналитка, собранная из личного опыта. Как построить удобный пользовтельский интерфейс для веба. Итак, мои советы.
Кроссбраузерная верстка. Не всегда дается легко, особенно при использовании сложного размещения блоков в дизайне. Но это первое и главное правило, если вы делаете проект в рамках обычного html интерфейса.
Не пугайтесь невалидного кода. Да, если можно делайте код красивым, но помните что код читают роботы, а сайтом пользуются люди. Поэтому чаще полезнее провести время в проектировании, тестировнии интерфейса или еще что вы посчитаете более важным.
Меньше используйте мешанины flash-html. Если вы хотите использовать флеш, сделайте на нем отдельную часть сайта, чтобы пользователь варился в ней как в отдельном приложении. Все дело в том, что флеш не учитывает особенностей исполнения интерфейса платформы на которой работает конечный пользователь. Поэтому контролы будут сильно отличаться внешне и по принципу работы, что будет раздражать пользователя. Пользователю легче привыкнуть к одному месту на сайте где все по другому, чем постоянно переключать внимание.
При использовании Ajax старайтесь всегда делать версию сайта, работающую в стиле old-school. Формы, поля, ссылки. В случае глюков или тормозов JS опытные пользователи всегда смогут перейти к обыкновенному режиму работы.
Используйте готовые JS/Ajax библиотеки. В них учтены уже кросс-браузерность и неровности работы JS. Писать «с нуля» свое слишком дорого и не оправдано.
Делайте сайты похожими на другие. Не надо клонировать дизайн или идеи. Я имею ввиду функциональные решения. Если есть тенденции их надо учитывать. Пользователю будет проще разобраться со всеми активными элементами сайта, если он их уже несколько раз встречал.
Пробуйте самые последнии и современные технологии веб, в которых уже учтены многие недостатки прошлых лет. На данный момент я имею ввиду декстопно ориентированные фреймвоки MS Silverlight и Adobe Air. Не обязательно вы их будете использовать в своих решениях, но быть «на коне» очень важно.
