Янв 05 2012

Как правильно упрощать

Категория: ИнтерфейсыМаксим Шайхалов @ 14:00

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги: , , , ,


Дек 21 2011

Наиболее полный курс веб-дизайна

Категория: Веб-дизайнМаксим Шайхалов @ 13:00

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

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

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

Раздел 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. Посвященный.

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

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

Теория:

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

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

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

Левел 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. Практика

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

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

411 thumb thumb Наиболее полный курс веб дизайна

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

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

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

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

960GridSystemDemo thumb Наиболее полный курс веб дизайна

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

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

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

Apple LED Cinema 4dccf1b3b56fc thumb Наиболее полный курс веб дизайна

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

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

step11c thumb Наиболее полный курс веб дизайна

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

Цвет и шрифт

16 thumb Наиболее полный курс веб дизайна

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

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

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

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

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

uxdiscussion thumb 3 Наиболее полный курс веб дизайна

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

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

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

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

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

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

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

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

Содержание

content thumb Наиболее полный курс веб дизайна

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

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

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

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

AfrAn7gCQAAlYHC1 thumb Наиболее полный курс веб дизайна

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

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

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

Теги: , , ,


Дек 02 2011

Трудности перевода

Категория: ИнтерфейсыМаксим Шайхалов @ 8:00

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

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

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

stream thumb Трудности перевода

В связи с большой шириной иероглифов каждый китайский или корейский символ равен двум символам на английском. В данном случае увеличение длины слова на итальянском языке в 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» на английском, в японском переводе будет выглядеть «デスクトップ».

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

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

enlineheight thumb Трудности перевода

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

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

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

via w3.org

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

Теги: , , ,


Ноя 16 2011

Диалоговые окна в вебе

Категория: Веб-дизайнМаксим Шайхалов @ 13:00

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

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

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

me.com1 thumb Диалоговые окна в вебе

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

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

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

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

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

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

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

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

via 37signals

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

Теги: , ,


Окт 31 2011

Кнопка или ссылка

Категория: ИнтерфейсыМаксим Шайхалов @ 13:00

links or button thumb Кнопка или ссылка

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

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

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

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

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

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

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

Теги: , , ,


Следующая страница →