Чтобы сделать что-либо более простым, существуют два способа:

1. Первый заключается именно в сокращении рамок проекта. О нем как раз говорилось выше.
   Действительно, таким образом можно достичь некоторой простоты в удобстве использования продукта, но, чаще всего, цель проекта становится трудно достижимой.
2. Второй способ заключается в том, чтобы сконцентрировать свое внимание на главном. В этом случае убирать ничего не нужно, а возможно даже придется добавлять функциональности. Главным образом вам необходимо скоординировать фокус. Благодаря этому, пользователи смогут гораздо более гибко и быстро использовать ресурсы для достижения своих целей.

На сегодняшний день многие компании уверены, что простота — это сокращение доступных функций устройства, однако это отнюдь не является истиной. Дело в том, чтобы совместить простые кнопки с технически сложным устройством. Вспомним хотя бы пример iPod-a. Это был первый плейер, который стал доступен для потребителя. До модели iPod classic все плейеры были лишь отражением их технической новизны и сложного устройства, поэтому они были ориентированы исключительно на человека, разбирающегося в технических новинках. Компания Apple подошла к вопросу иначе и сразу завоевала лидирующие позиции.

Из этого можно сделать элементарный вывод. Простота помогает добиваться успеха.

Упрощение воды

Если правильно пользоваться понятием простоты, то упростить и улучшить можно все. Но, если этот принцип использовать не правильно, то вполне возможен и обратный эффект.

Например, давайте попробуем сделать «проще» стакан с водой. Как это сделать?

Если что-то убрать, то стакана с водой просто не будет. Предположим, что мы убрали стакан, тогда вода просто растечется по поверхности. Но, если мы уберем воду, то нам нечего будет пить. Как видите, ничего убрать нельзя, ни целого, ни его частей. Если убрать часть стакана, то в образовавшееся отверстие, вода просто вытечет. А если убрать половину стакана воды, то не получим конечного результата — мы просто не напьемся.
Можем сделать вывод о том, что меньше, это всегда меньше. Чаще всего, делая что-то меньше, мы его разрушаем.

Значит, для достижения результата ничего убирать нельзя. Тогда можно ли упростить стакан воды? Ответ – да.
Можно убрать из стекла лишний воздух, содержащийся в нем в виде пузырьков, от чего поверхность стакана станет гладкой и очень тонкой, практически невидимой. И у нас будет создаваться впечатление, что вода просто находится в воздухе, а не в стакане.

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

Нам удалось сделать «проще» стакан с водой, но при этом, мы ничего не сделали меньше.

Упрощение толстяка

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

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

Если наши «упрощения» начнутся с сокращения его функциональности, то мы получим явно сокращенный вариант того, что имели в начале. И, однозначно, это плохо. Например, начав упрощение, мы убрали у него руки. Стало лучше? У нас получился полный безрукий парень. Давайте, попробуем убрать у него ноги. Сделав его «проще» таким образом, мы превратили его в инвалида (бу-га-га!).

Согласитесь, что эти примеры достаточно глупы, ведь мы не убрали то, что надо было бы убрать. Нам нужно было бы убрать его самую толстую часть. Однако, помним, что если мы просто уберем его полное тело, мы тоже не упростим его, а просто лишим своей функциональности.

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

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

Например, браузер. Они очень помогают просматривать страницы интернета, при этом имеют множество полезных адд-онов.

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

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

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

Раздел 1. Теория.

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

Левел 0. «Вы все гавно!» ©

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

Ни о каком изучении фотошопа я бы думать пока не советовал.

Примерный список технологий:

• Кодировки. В чем разница между ASCII и UTF-8?
• HTML. Основной язык разметки интернета. Много чего можно подчерпнуть на htmlbook.ru.
• CSS. Каскадные таблицы стилей. Вся инфа так же есть на htmlbook.ru.
• Растровая графика. Принцип работы и отличия от векторной.
• Векторная графика. Преимущества и недостатки по сравнению с растровой.
• PHP и динамические страницы. Знание возможностей.
• JavaScript. Применение и основные возможности.

Левел 1. На пути к просветлению.

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

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

Инструментарий:

• Мозг. Это инструмент №1. Овладение им в совершенстве — 80% успеха.
• Бумага и карандаш. Помогает фиксировать дикие идеи выдаваемые мозгом. А также вспоминать о них с утра после усиленного поиска вдохновения J
• Инструменты прототипирования (о прототипировании позже). Можете сами сделать выбор.

              · Axure;

              · Balsamiq;

              · Adobe InDesign;

              · Adobe Fireworks;

              · Бумага;

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

              · Adobe Photoshop;

              · Adobe InDesign;

              · Adobe Fireworks;

              · Adobe Illustrator. Если собираетесь заняться также векторной графикой.

То, что выделено полужирным начертанием, является обязательным минимумом для получения левела. Уроками по программным продуктам Adobe завален весь интернет. Они помогут в изучении инструментария.

Очень хороши уроки по продуктам Adobe от сайта Lynda.com. Найти их можно на том же рутрекере. Будьте готовы, они на английском.

Теория дизайна:

• Теория цвета и цветовой круг.
• Пространственные отношения. Размер, пропорции.
• Форма. Прямые, прямоугольники, круги, кривые Безье.

Здесь будут полезны поверхностные основные принципы дизайна.

Левел 2. Посвященный.

Чувствуете, как наливаются свинцом ваши яйца? Если нет, то марш к началу. Изученную теорию запомнить, работу с усвоенным инструментарием продолжать. Не забывать практиковаться.

Инструментарий:

• Adobe kuler (подбор цвета);
• Типографская раскладка Ильи Бирмана;
• Подбор палитры;

Теория:

• Правила хорошего тона в фотошопе;
• Типографика (используйте, мать его, сглаживание шрифтов в макетах). Взаимодействие шрифтов;
• Композиция;
• Текстурирование;
• Единство;
• Баланс;
• Контраст;
• Динамика;

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

Смотрите на работы признанных мастеров и пытайтесь понять, почему же они такие крутые.

Левел 3. Чак Норисс веб-дизайна.

Вы умеете делать красиво. Теперь осталось научиться делать удобно.

Теория:

• Экстремальная типографика. Роберт Брингхест и Ян Чихольд обязательны к прочтению
• Юзабилити
• Информационный дизайн и представление информации
• Психология пользователя
• User experience
• Математические обоснования удобства интерфейсов
• Концепция UCD
• Книги из «Библиотеки»

Инструментарий:

• Мастерское и интуитивное владение всеми описанными инструментами

На этом же этапе можно начать расширять количество скилов в смежных областях. Например, глубоко изучить Flash и 3ds max.

Материалы по юзабилити и интерфейсам можно опять же найти в моем блоге.

Библиотека

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

• «Веб-дизайн» Дмитрий Кирсанов
• «Не заставляйте меня думать» Стив Круг
• «Психбольница в руках пациентов» Алан Купер
• «Об интерфейсе» Алан Купер
• «Веб-дизайн» Якоб Нильсен
• «Дизайн привычных вещей», Дональд Норман
• «Web-дизайн: удобство использования web-сайтов» Якоб Нильсен, Хоа Лоранджер
• «Дизайн пользовательского интерфейса. Искусство мыть слона» Влад Головач http://uibook2.usethics.ru/
• «Информационная архитектура в интернете» Л. Розенфельд, П. Морвиль
• «Ководство», Артемий Лебедев
• «Облик книги», Ян Чихольд
• «Введение в ТРИЗ (теорию решения изобретательских задач)» Генрих Альтшуллер
• Apple OS X HIG
• Apple Mobile HIG
• Microsoft UX Guide
• «Envisioning Information» Edward Tufte
• «Visual Explanations» Edward Tufte
• Н. А. Атабеков. Словарь-справочник иллюстратора научно-технической книги.
• Н. С. Валгина. Синтаксис современного русского языка.
• А. Э. Мильчин, Л. К. Чельцова. Справочник издателя и автора. Редакционно-издательскоеоформление издания.
• О. Ю. Соколова. Секреты композиции. Для начинающих художников
• Г. М. Логвиненко. Декоративная композиция
• О. Л. Голубева. Основы композиции
• Р. В. Паранюшкин. Композиция
• Н. М. Сокольникова. Изобразительное искусство: Основы композиции. 5 — 8 классы. Часть 3
• И. Б. Ветрова. Неформальная композиция: от образа к творчеству
• Л. П. Дыко. Основы композиции в фотографии
• Дэн Маргулис. Photoshop для профессионалов. Цветокоррекция, ретушь, работа с изображениями в Adobe Photoshop
• О. Буковецкая. Дизайн текста: шрифт, эффекты, цвет
• Я. Чернихов, Н. Соболев. Построение шрифтов
• Альберт Капр. Эстетика искусства шрифта
• Роберт Брингхерст. Основы стиля в типографике
• Иоханнес Иттен. Искусство цвета
• М. Н. Макарова. Перспектива

Раздел 2. Практика

Второй раздел рассказывает на примере как делается дизайн сайта, останавливаясь на конкретных практических нюансах.

Концепция и прототип

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

В любом случае начинать стоит с прототипа. Чаще всего я делаю прототипы на бумаге. На бумаге легко накидать расположение блоков и каркас будущего макета.

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

Модульная сетка

Не стоит забывать про модульную сетку. Она помогает сделать красивый ровный макет. Да и верстальщикам потом будет проще.

Какую сетку выбрать? Я советую рисовать сетку в зависимости от нужд. Смысловая объединеность лучше, чем тупое разбиение на колонки. В общих случаях можно использовать сетки blueprint или 960.gs.

Пропорции и экран

Хороший сайт должен одинаково хорошо выглядеть на всех разрешениях монитора. Поэтому я ставлю ширину макета равную 1000px (для разрешения 1024*768, меньше — нет смысла) и стараюсь не выходить за нее. Элементы должны масштабироваться тоже, размеры шрифтов указываются в em, блоки и горизонтали — в процентах.

Масштабируемость

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

Цвет и шрифт

Определившись с концепцией, расположением блоков и меню можно приступать к подбору цвета и шрифтов. В подборе цвета поможет Adobe Kuler (cм. теорию) и сайт http://www.colourlovers.com/.

Хороший дизайн, как правило, базируется на одном-трех шрифтах.

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

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

Взаимодействие

Сайт — это живая и интерактивная система, которая взаимодействует с пользователем. Поэтому сайт должен предусматривать реакцию на действия пользователя. Дизайнер должен ответить на ряд вопросов:

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

Всеми этими вопросами занимается раздел под названием User Experience.

Ссылки и псеводоссылки

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

К ссылкам необходимо добавлять специальные иконки, если они:

• открывают новое окно
• ведут к скачиванию файла
• ведут на RSS канал

Псведоссылки — это отдельный класс ссылок. Всю информацию по псевдоссылкам можно найти в моем блоге.

Содержание

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

Поэтому показываем то, как оформляется:

• основной контент;
• H1, H2, H3 заголовки;
• ссылки, псевдо-ссылки;
• списки;
• картинка в тексте;
• таблицы;
• формы.

По поводу рыбы. Не используйте для рыбы различный бред (типа Яндекс Рефератов). Я никогда не ленюсь написать какую-нибудь прикольную рыбу.

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

Поле для изучения задано. Дерзайте!

Кстати, есть полная русская озвучка наруто. Ну это вдруг кому надо.

Похожее:

Самые сложные тексты – на английском и китайском.

Так как текст, написанный на английском и китайском языках обычно очень компактен,  перевод с них обычно получается намного шире. Например, когда был сделан перевод на разные языки пользовательского интерфейса «Flickr». Наиболее часто при просмотре фотографий встречается сообщение о количестве просмотров – «392 просмотра». Можно попробовать сравнить длину слова «просмотр» в переводе на различные языки с длиной оригинала на английском. Например, если взять за основу, что длина английского «views» равна 1, то его корейский аналог «조회» будет иметь длину 0,8; китайский «次 检视» — 1,2; португальский «visualizações» — 2,6; французский «consultations» — 2,6; немецкий «-mal angesehen» — 2,8; итальянский «visualizzazioni» — 3.

В связи с большой шириной иероглифов каждый китайский или корейский символ равен двум символам на английском. В данном случае увеличение длины слова на итальянском языке в 300% — обычное дело.

Компанией «IBM» в 1994 опубликовано специальное «Руководство по проектированию локализированных приложений», в котором можно найти средние значения того, как соотносится длина переводов с английского языка на другие. Например, если в английском слове меньше 10 символов, то его длина при переводе увеличится в 200-300%; от 11 до 20 символов – 180-200%; от 21 до 30 символов – 160-180%; от 31 до 50 символов – 140-160%; от 51 до 70 символов – 130-140%; от 70 символов и больше – 70-150%. Из этого можно сделать вывод, что обычно переведенный текст занимает больше места, чем исходный. Кроме того, чем меньше будет исходное сообщение, тем большей будет вероятность его существенного увеличения при переводе. Поэтому, такой вариант развития событий тоже необходимо учитывать, так как при увеличении длины слова, переведенный текст может оказаться «зажатым» в тесном пространстве, например, рядом с полем формы или внутри какого-либо графика. Конечно, не все сообщения или строчки после адаптации увеличиваются в длине, но в случае возникновения такой проблемы переводчик должен найти способ решить ее. Для примера, в интерфейсе «Flickr» перевод аббревиатуры «FAQ» выглядит как «FAQ» на французском и немецком языках, а на португальском и испанском это будет «Perguntas freqüentes» и «Preguntas frecuentes» соответственно.

Нужно иметь в виду, что проблема с расширением текста не является особенностью интерфейсов, в которых оригинальный текст написан на английском или китайском языке. Допустим, если исходный вариант текста на испанском выглядит как «Idioma de la interfaz», то при переводе его на английский длина текста сократится до «Interface language», а на малайский – увеличится до «Bahasar pegantar untuk penelusuran». Также как и значительное увеличение, уменьшение количества символов тоже плохо повлияет на общий вид страницы – на ней появится избыточное пустое пространство.

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

Осложнения

Кроме неизвестного количества символов в переведенном тексте, существуют еще и другие факторы, которые могут заметно осложнить создание текстового макета.

Сочленённые существительные

В некоторых языках германской группы (финский, немецкий, голландский) часто бывают случаи, в которых несколько последовательных слов при переводе с других языков становятся одним большим. Например, английское словосочетание «Input processing features» на немецком приобретает вид «Eingabeverarbeitungsfunktionen». Английский текст, при необходимости, без усилий можно разбить на отдельные строчки, тогда как немецкое «супер-слово» создаст значительную проблему в макете.

Ширина символов

Восточные и некоторые другие языки имеют более сложное начертание символов, чем латиница. Это приводит к такой проблеме, когда длина слова в строчке неизменна или даже меньше в переводе, чем в исходном варианте, но она все равно занимает больше пространства, чем в оригинале, за счет большей высоты символов. Например, «desktop» на английском, в японском переводе будет выглядеть «デスクトップ».

Высота символов и междустрочные интервалы

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

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

Использование аббревиатур

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

via w3.org

Сегодняшний спонсор поста: грамотное поисковое продвижение веб сайтов в вашем регионе.

Обычно, когда речь заходит о модальных окнах, имеются в виду диалоги, как в известном сервисе GoogleDocs (на данный момент уже все работает нормально — прим. пер.). Аза критикует именно модальные окна такого рода. После открытия диалога поиска/замены, нигде нельзя кликнуть мышью. Ну, кроме самого этого диалога. Вы не сможете полистать документ, который находится под диалогом, либо скопировать из документа какое-нибудь слово и вставить в строку поиска, при этом не закрывая диалог.

Существуют и другие виды модальных окон. За примером можно отправиться на сайт me.com компании Apple. Взгляните на панель настроек — тут нет ничего, что потребовало бы работу с перекрытым им содержимым. С точно таким же успехом это мог быть и отдельный экран.

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

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

Модальные окна в виде альтернативной навигации

Есть несколько вопросов, крутящиеся в нашем сознании чаще всего при работе с различным программным обеспечением — «Да где же я?» и «Что мне сделать, чтобы вернуться обратно?». Существует масса вариантов упрощения: кнопки «Отмена», вкладки и многое другое. Вот почему бы взять и не подумать о разных модальных окнах, которые бы решили те же проблемы? Такой механизм довольно эффективно сглаживает все эти вопросы. «Где я?» попросту не возникает, так как вы и не думали покидать основной экран. А ответ на вопрос «Как вернуться обратно?» вполне очевиден, потому что основной экран на заднем плане остается видимым.

Немного о размере экрана

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

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

Есть и хорошие модальные окна

Интернет-сайт me.com вполне наглядно показывает, что все-таки некоторые модальные оверлеи обладают каким-никаким правом на существование, как своего рода альтернатива традиционному принципу навигации между несколькими независимыми экранами. Также довольно интересно вести рассуждения о том, какие экраны заслуживают отдельного полного окна браузера, а какие наоборот — должны относиться к разряду подуровней у других экранов. Можно предположить, что когда разные люди нахваливают приложения за их хорошую «десктопность», этот пусть небольшой недостаток навигации между несколькими экранами рождает много критических замечаний. Компания Apple хорошо показала возможность включения так называемых «десктопных» принципов в различные приложения без превращения в аналог «десктопных» систем.

via 37signals

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

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

Одна из таких ошибок — перепутать кнопку с ссылкой. Я думаю, картинка с заглавии статьи наиболее точно описывает человека, столкнувшегося на сайте с таким оформлением. Что мы видим? Активная ссылка (т. е. ссылка на страницу на которой мы находимся) оформлена так же как и кнопка заказа. Лично я бы попробовал понажимать кнопку «Безлимитные карты».

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

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

Есть, конечно, также псевдоссылки, но не стоит путать их с кнопками. Это не кнопка, выглядящая как ссылка. Разница с псевдоссылками состоит в том, что нажатие кнопки ведет к отправке данных (например: кнопка «Заказать» отправляет данные о заказе, «Оставить комментарий» отправляет комментарий на сайт). В то время когда нажатие на псевдоссылку приводит к действию внутри страницы.

Однако «Заказать» может быть и ссылкой, если она ведет на страницу с контактами.

Вывод: ссылка — это не кнопка, а кнопка — это не ссылка. Поэтому, они не должны выглядеть одинаково. Эти два элемента интерфейса не могу заменять друг друга. Дизайнер должен понимать логику работы сайта и интуитивно знать где какой элемент применить.

Похожее:

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

Чем раньше, тем лучше

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

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

Не заставляйте пользователя думать

Современный пользователь — существо чрезвычайно занятое. Он не будет тратить даже 5 секунд на то, чтобы сообразить, как добиться того или иного результата — он попросту покинет ресурс или закроет программу. Кроме того, хотя вам, возможно, хочется собрать, как можно больше информации о своих пользователях или посетителях, избавьте их от необходимости заполнять бесконечные анкеты или подтверждать сделанный выбор. Поверьте, они будут благодарны.

Чем проще, тем лучше

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

Сокращаем путь к результату

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

Удобная группировка

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

Иконки могут быть сложными для понимания

Разработка иконок — непростая задача, и далеко не всегда и не всем удается справиться с ней на «отлично». Возможно, иконки будут выглядеть очень привлекательно, но их назначение — информировать пользователя. Потому, если что-то кажется не очевидным, лучше переделать. А в большинстве случаев иконки оптимально заменить кнопками с текстом — они значительно проще для восприятия.

Добивайтесь однозначности

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

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

Отдаем предпочтение функционалу

Внешний вид продукта — вторичен. Если обратить внимание на самые популярные программы и сайты, то можно обнаружить, что «красивости» в них значительно меньше, чем в других аналогичных продуктах. Пользователю важно, насколько все быстро работает, легко ли найти информацию, просто ли запомнить то, как получить тот или иной результат. Красота дизайна его беспокоит не более нескольких секунд. Именно функционал должен занимать большую часть времени при разработке. А «обои» можно поменять и позже.

Via Aza Raskin

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

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

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

Начнем!

Fireworks CS5: Rapid Prototyping—Welcome

Fireworks CS5: Rapid Prototyping—Using doc templates for wireframing

Fireworks CS5: Rapid Prototyping—Sharing assets to pages

Fireworks CS5: Rapid Prototyping—Creating a scroll panel

Fireworks CS5: Rapid Prototyping—Examining the structure

Полную подборку уроков можно найти, например, на Рутрекере по запросу: Fireworks CS5: Rapid Prototyping.

Похожее:

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

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

1. Размер

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

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

2. Шрифт

Добиться контраста можно и путем комбинирования разных шрифтов. Для этого чаще всего используют так называемые «веб-безопасные» шрифты. Есть два основных типа таких шрифтов – serif (шрифт с засечками) и sans-serif (без засечек).

Оба используются при создании контраста между текстовым блоком (sans-serif) и собственно заголовком (serif).

3. Цвет

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

Используя метод цветового контраста, можно подчеркнуть нечто запрещенное или невозможное – блеклыми цветами.

А когда нужно, наоборот, привлечь внимание, то для выделения лучше подойдут яркие цвета.

Цветовые контрасты применяются и для выделения внутри текста отдельных абзацев  или определенных слов.

Полностью нейтрализует важность текста или его частей комбинирование маленького размера шрифта с блеклыми цветами и светлым фоном.

4. Регистр

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

Для смены регистра используется CSS свойство – text-transform: uppercase.

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

5. Стиль

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

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

6. Начертание

Полужирный шрифт (bold) – еще один способ контрастно выделить значимые части  текста.

Но и здесь не стоит перебарщивать: некоторые дизайнеры выделяют целые строчки полужирным шрифтом. Как следствие – утрата контрастности фрагмента и снижение  его важности.

7. Пространство

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

Создать пространство можно несколькими приемами:
– разбивка на блоки (с использованием элементов margin или padding для создания отступов);
– разбивка на параграфы (путем создания промежутков между блоками текста);
– межбуквенные (letter-spacing) и межстрочные (line-height) интервалы;
– создание абзацев (при работе со списками и/или цитатами).

А теперь попробуем соединить все описанные методы на конкретном примере.

via Typographic Contrast and Flow.

Нашел, где обменять LiqPay на AlertPay. Кому надо, то велком по ссылке: www.bestchange.ru/liqpay-rur-to-alertpay.html Также на их сайте был обмен электронных денег.

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

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

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

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

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

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

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

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

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

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

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

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

Based on:Usabilitypost.com

Изучаю людские сны. Периодически заглядываю в сонник нострадамуса. Советую заглянуть и вам.