Быстрое прототипирование в Fireworks CS5 (видеоуроки)

lynda

Этот пост будет немного необычен т.к. представляет из себя этакий видеопост т. е. подборку видео уроков от Lynda.com по быстрому прототипированию средствами Fireworks CS5. Линдоновские уроки мне на самом деле очень нравятся и как обещают на сайте — реально работают.

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

Внимание: все уроки на английском.

Начнем!

Читать дальше →

Создание контрастов на сайте

Любой дизайнер знает, что обычные пользователи просто «сканируют» читаемый текст, быстро перемещая взгляд от одной точки к другой. Они не «считывают»  информацию, как это делается при чтении, например, книги (последовательно, строчка за строчкой), а просто «ухватывают» глазами наиболее существенные моменты.

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

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

1. Размер

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

size-large

А когда требуется уменьшить значимость, это легко сделать шрифтом меньшего размера.

size-small

Читать дальше →

Делайте сайты для клиентов

capitan

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

Начнем, наверное с самой популярной темы.

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

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

Вы можете подумать, что тупость заразна. Однако это вполне естественное явление для каждого человека. Оно относится к «ментальным ловушкам» в нашем сознании. Оно проявляется, когда вы выбираете подарок себе, а не маме на день рождения. То есть, необходимо выбирать, пользуясь не вашим собственным опытом и вкусом, а опытом вашей мамы (либо представлением об этом вкусе). Если вы намеренно не задумаетесь об этом, то окажетесь в этой ловушке и, конечно же, купите то, что интересно вам.

Таким же образом сайты компаний делаются для себя, совершенно забывая о клиентах при этом. А как только они сами оказываются в роли клиента, то тотчас они начинают возмущаться: «где цены? где товары? wtf?!», поскольку в этот момент, обладая клиентским опытом им можно судить о том, соответствует ли сайт их задачам и целям. Я скажу вам даже еще более жуткую вещь: «Не обязательно, чтобы вам нравился ваш сайт». Но вашим клиентам он должен нравиться обязательно.
Именно здесь UX дизайн выходит на сцену, ставя своей целью проектирование веб-сайта с точки зрения опыта пользователей (UserExperience). Ведь именно в этом весь смысл дизайна взаимодействия.

Оптимизация диалоговых окон

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

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

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

А если бы на кнопках вместо безликих коллег из Windows были бы надписи, например, «Сохранить», «Не сохранять» или «Отменить», то по одному взгляду на кнопки можно будет знать, что они значат.

osx_save_dialog

Теперь перейдем от диалоговых окон Windows к аналогичным из Mac OS X.

Если использовать текстовый редактор и попытаться выйти, предварительно не позаботившись о сохранении текста в файле, то мы увидим диалоговое окно, которое по смыслу схоже с тем, что было в Виндовс, но объясняется все, что произойдет по нажатию той или иной кнопки до мельчайших деталей. Внимание приковывают кнопки — понимаешь, что нужно делать, с первого взгляда. Все кнопки содержат в себе смысл, выражаемый действием — «Сохранить», «Не сохранять» и «Отменить». Существенно повышается работоспособность, скорость и эффективность работы, ведь теперь не нужно будет читать текст диалогового окна целиком, а узнавать все по надписям на кнопках.

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

Читать дальше →

Псевдоссылки

links

Псевдоссылка — ссылка, с dashed или dotted подчеркиванием. При щелчке по такой ссылке не происходит переход к другой странице, а выполняется некоторое действие на текущей странице без ее перезагрузки. Наиболее распространена такие ссылки в Рунете, часто используются совместно с технологией AJAX. Для создания ссылок используется свойство CSS border-bottom со значение dashed или dotted.

Кто-то принимает псевдоссылки за аналог кнопки, но это не совсем так. Давайте разберемся

Правила

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

Подчеркивание обозначает:

  • «линией» — действие при нажатии с переходом на другую страницу; ссылка на страницу; не действие; желательно выражать существительным;
  • «пунктиром» — действие при нажатии без перехода перехода на другую страницу и перезагрузки текущей; желательно выражать глаголом;
  • «точками» — действие при наведении; визуальное выделение ссылки, которая поясняется дополнительно и чаще всего всплывающей подсказкой (например: аббревиатуры и подсказки)

P.S.: Убедительная просьба. Перестаньте подчеркивать текст в вебе, если только это не ссылка. Лучи ненависти вызывают люди, выделяющие слова подчеркиванием. Для выделения текста уже давно изобрели полужирное и курсивное начертание.

Читать дальше →

Юзабилити и иконки

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

При дизайне, вы стараетесь рисовать/использовать изоморфные иконки — то есть пиктограммы, которые взяты из реальной жизни (например, мусорное ведро, кисть, ластик и т. д). Пока вы можете подобрать несколько достойных метафор, эти значки будут работать. Но что делать если нет метафоры из реальной жизни?

В качестве примера, я собираюсь использовать значок ссылки. «Ссылку?» — скажите Вы. «Все знают как выглядит значок ссылки!» Какая первая иконка приходит вам на ум, когда вы думаете о вставки ссылки в электронной почте, блоге или любимой CMS? Цепь? Земной шар? ...? Да, есть несколько различных иконок для вставки ссылок, и вы можете подумать, что все они логичны. Но не обязательно.

Как это делают большие парни?

 

icons

Примеры иконок ссылок в различных веб-приложениях и программах

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

Читать дальше →

«Новый» или «Добавить»

Я был на совещании несколько недель назад, где был спор о том, какую кнопку лучше использовать: «Новый» или «Добавить». Истина же в том, что эти команды разные и не взаимозаменяемы. Самым простым способом объяснения может служить этот пример интерфейса:

neworadd

Окна и с командами «Новый» и «Добавить»

Читать дальше →

Экспресс-юзабилити тест: 3dtop.net

logo

Я продолжаю публиковать оперативные юзабилити-тесты различных сайтов. В этот раз в качестве подопытного выступит галерея компьютерной графики 3dtop.net.

Читать дальше →

Многоточие...

Многие из вас могут быть знакомы с использованием многоточий в меню, но вы знаете правила, когда их использовать?

Посмотрите на меню «Файл» Firefox на скриншоте ниже. Некоторые из этих пунктов меню (например, «Открыть файл ...») имеют многоточия, а другие (например, «Новое окно») нет.

firefox file Firefox, меню Файл, показаны многоточия

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

Читать дальше →

Дизайнерские новинки от Google

google-logo-plus-0fbe8f0119f4a902429a5991af5db563Ни для кого не секрет, что гугл — одна из самых крупных и уважаемых компаний в Сети. Однако дизайн сервисов гугла оставляет желать лучшего. Стоит взглянуть хотя бы на страницу выдачи. Зачем они добавили эту ужасающую колонку слева? Раньше все было гораздо проще и приятней.

Волна смены дизайна заставляет задуматься — может не все потерянно и все обернется к лучше. Так что же поменялось?

Читать дальше →

Суперрассылка!

Введите почту и будьте в курсе